<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="generator" content="VuePress 2.0.0-beta.51" />
    <meta name="theme" content="VuePress Theme Hope" />
    <meta property="og:url" content="https://pro.autojs.org/docs/zh/v8/ui/basic.html">
    <meta property="og:site_name" content="Auto.js Pro文档">
    <meta property="og:title" content="基础布局与控件">
    <meta property="og:type" content="article">
    <meta property="og:image" content="https://pro.autojs.org/docs/">
    <meta property="og:updated_time" content="2022-10-27T05:15:37.000Z">
    <meta property="og:locale" content="zh-CN">
    <meta property="og:locale:alternate" content="en-US">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image:alt" content="基础布局与控件">
    <meta property="article:modified_time" content="2022-10-27T05:15:37.000Z">
    <link rel="alternate" hreflang="en-us" href="https://pro.autojs.org/docs/en/zh/v8/ui/basic.html">
    <link rel="icon" href="https://pro.autojs.org/docs/favicon.ico">
    <link rel="manifest" href="https://pro.autojs.org/docs/manifest.webmanifest" crossorigin="use-credentials">
    <meta name="theme-color" content="#46bd87">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>基础布局与控件 | Auto.js Pro文档</title>
    <meta name="description" content="支持Node.js的自动化工作流JavaScript IDE">
    <style>
        :root {
            --bg-color: #fff;
        }

        html[data-theme="dark"] {
            --bg-color: #1d2025;
        }

        html,
        body {
            background-color: var(--bg-color);
        }
    </style>
    <script>
        const userMode = localStorage.getItem("vuepress-theme-hope-scheme");
        const systemDarkMode =
            window.matchMedia &&
            window.matchMedia("(prefers-color-scheme: dark)").matches;

        if (userMode === "dark" || (userMode !== "light" && systemDarkMode)) {
            document.querySelector("html").setAttribute("data-theme", "dark");
        }
    </script>
    <link rel="stylesheet" href="../../../assets/style.ae9cb182.css">
    <link rel="modulepreload" href="../../../assets/app.6aa2b576.js">
    <link rel="modulepreload" href="../../../assets/basic.html.7fce795f.js">
    <link rel="modulepreload" href="../../../assets/_plugin-vue_export-helper.cdc0426e.js">
    <link rel="modulepreload" href="../../../assets/basic.html.e93747ba.js">
</head>

<body>


    <!-- Copyright � 2008. Spidersoft Ltd -->
    <style>
        A.applink:hover {
            border: 2px dotted #DCE6F4;
            padding: 2px;
            background-color: #ffff00;
            color: green;
            text-decoration: none
        }

        A.applink {
            border: 2px dotted #DCE6F4;
            padding: 2px;
            color: #2F5BFF;
            background: transparent;
            text-decoration: none
        }

        A.info {
            color: #2F5BFF;
            background: transparent;
            text-decoration: none
        }

        A.info:hover {
            color: green;
            background: transparent;
            text-decoration: underline
        }
    </style>


    <div id="app"><!--[--><!--[--><!--[--><span tabindex="-1"></span><a href="#main-content"
            class="skip-link sr-only">Skip to content</a><!--]-->
        <div class="theme-container has-toc"><!--[--><!--[-->
            <header class="navbar">
                <div class="navbar-left"><button class="toggle-sidebar-button" title="Toggle Sidebar"><span
                            class="icon"></span></button><!----><a href="../../../docs.html" class="brand"><img
                            class="logo" src="../../../logo.png" alt="Auto.js Pro文档"><!----><span
                            class="site-name hide-in-pad">Auto.js Pro文档</span></a><!----></div>
                <div class="navbar-center"><!---->
                    <nav class="nav-links">
                        <div class="nav-item hide-in-mobile"><a href="../../../docs.html" class="nav-link"
                                aria-label="Auto.js Pro"><span class="icon iconfont icon-home"></span>Auto.js
                                Pro<!----></a></div>
                        <div class="nav-item hide-in-mobile"><a href="../../guide/guide.html" class="nav-link"
                                aria-label="指南"><span class="icon iconfont icon-creative"></span>指南<!----></a></div>
                        <div class="nav-item hide-in-mobile"><a href="../v8.html" class="nav-link active"
                                aria-label="第一代API文档"><span class="icon iconfont icon-note"></span>第一代API文档<!----></a>
                        </div>
                        <div class="nav-item hide-in-mobile"><a href="../../v9/v9.html" class="nav-link"
                                aria-label="第二代API文档"><span class="icon iconfont icon-note"></span>第二代API文档<!----></a>
                        </div>
                        <div class="nav-item hide-in-mobile">
                            <div class="dropdown-wrapper"><button class="dropdown-title" type="button"
                                    aria-label="官网与相关链接"><span class="title"><span
                                            class="icon iconfont icon-discover"></span>官网与相关链接</span><span
                                        class="arrow"></span>
                                    <ul class="nav-dropdown">
                                        <li class="dropdown-item"><a href="../../../../pro.autojs.html"
                                                rel="noopener noreferrer" target="_blank" aria-label="官网与软件下载"
                                                class="nav-link"><!---->官网与软件下载<span><svg class="external-link-icon"
                                                        xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                                                        focusable="false" x="0px" y="0px" viewBox="0 0 100 100"
                                                        width="15" height="15">
                                                        <path fill="currentColor"
                                                            d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                                                        </path>
                                                        <polygon fill="currentColor"
                                                            points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                                                        </polygon>
                                                    </svg><span class="external-link-icon-sr-only">open in new
                                                        window</span></span><!----></a></li>
                                        <li class="dropdown-item"><a href="https://blog.autojs.org/"
                                                rel="noopener noreferrer" target="_blank" aria-label="官方博客"
                                                class="nav-link"><!---->官方博客<span><svg class="external-link-icon"
                                                        xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                                                        focusable="false" x="0px" y="0px" viewBox="0 0 100 100"
                                                        width="15" height="15">
                                                        <path fill="currentColor"
                                                            d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                                                        </path>
                                                        <polygon fill="currentColor"
                                                            points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                                                        </polygon>
                                                    </svg><span class="external-link-icon-sr-only">open in new
                                                        window</span></span><!----></a></li>
                                        <li class="dropdown-item"><a href="https://pd.qq.com/s/gosos5"
                                                rel="noopener noreferrer" target="_blank" aria-label="官方频道"
                                                class="nav-link"><!---->官方频道<span><svg class="external-link-icon"
                                                        xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                                                        focusable="false" x="0px" y="0px" viewBox="0 0 100 100"
                                                        width="15" height="15">
                                                        <path fill="currentColor"
                                                            d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                                                        </path>
                                                        <polygon fill="currentColor"
                                                            points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                                                        </polygon>
                                                    </svg><span class="external-link-icon-sr-only">open in new
                                                        window</span></span><!----></a></li>
                                    </ul>
                                </button></div>
                        </div>
                    </nav><!---->
                </div>
                <div class="navbar-right"><!---->
                    <div class="nav-item">
                        <div class="dropdown-wrapper i18n-dropdown"><button class="dropdown-title" type="button"
                                aria-label="选择语言"><!--[--><svg xmlns="http://www.w3.org/2000/svg" class="icon i18n-icon"
                                    viewBox="0 0 1024 1024" fill="currentColor" aria-label="i18n icon"
                                    style="width:1rem;height:1rem;vertical-align:middle;">
                                    <path
                                        d="M379.392 460.8 494.08 575.488l-42.496 102.4L307.2 532.48 138.24 701.44l-71.68-72.704L234.496 460.8l-45.056-45.056c-27.136-27.136-51.2-66.56-66.56-108.544h112.64c7.68 14.336 16.896 27.136 26.112 35.84l45.568 46.08 45.056-45.056C382.976 312.32 409.6 247.808 409.6 204.8H0V102.4h256V0h102.4v102.4h256v102.4H512c0 70.144-37.888 161.28-87.04 210.944L378.88 460.8zM576 870.4 512 1024H409.6l256-614.4H768l256 614.4H921.6l-64-153.6H576zM618.496 768h196.608L716.8 532.48 618.496 768z">
                                    </path>
                                </svg><!--]--><span class="arrow"></span>
                                <ul class="nav-dropdown">
                                    <li class="dropdown-item"><a href="../../../en/en.html" class="nav-link"
                                            aria-label="English"><!---->English<!----></a></li>
                                    <li class="dropdown-item"><a aria-current="page" href="basic.html"
                                            class="router-link-active router-link-exact-active nav-link active"
                                            aria-label="简体中文"><!---->简体中文<!----></a></li>
                                </ul>
                            </button></div>
                    </div><!---->
                    <div class="nav-item hide-in-mobile"><button id="appearance-switch"><svg
                                xmlns="http://www.w3.org/2000/svg" class="icon auto-icon" viewBox="0 0 1024 1024"
                                fill="currentColor" aria-label="auto icon" style="display:block;">
                                <path
                                    d="M512 992C246.92 992 32 777.08 32 512S246.92 32 512 32s480 214.92 480 480-214.92 480-480 480zm0-840c-198.78 0-360 161.22-360 360 0 198.84 161.22 360 360 360s360-161.16 360-360c0-198.78-161.22-360-360-360zm0 660V212c165.72 0 300 134.34 300 300 0 165.72-134.28 300-300 300z">
                                </path>
                            </svg><svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" viewBox="0 0 1024 1024"
                                fill="currentColor" aria-label="dark icon" style="display:none;">
                                <path
                                    d="M524.8 938.667h-4.267a439.893 439.893 0 0 1-313.173-134.4 446.293 446.293 0 0 1-11.093-597.334A432.213 432.213 0 0 1 366.933 90.027a42.667 42.667 0 0 1 45.227 9.386 42.667 42.667 0 0 1 10.24 42.667 358.4 358.4 0 0 0 82.773 375.893 361.387 361.387 0 0 0 376.747 82.774 42.667 42.667 0 0 1 54.187 55.04 433.493 433.493 0 0 1-99.84 154.88 438.613 438.613 0 0 1-311.467 128z">
                                </path>
                            </svg><svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon"
                                viewBox="0 0 1024 1024" fill="currentColor" aria-label="light icon"
                                style="display:none;">
                                <path
                                    d="M952 552h-80a40 40 0 0 1 0-80h80a40 40 0 0 1 0 80zM801.88 280.08a41 41 0 0 1-57.96-57.96l57.96-58a41.04 41.04 0 0 1 58 58l-58 57.96zM512 752a240 240 0 1 1 0-480 240 240 0 0 1 0 480zm0-560a40 40 0 0 1-40-40V72a40 40 0 0 1 80 0v80a40 40 0 0 1-40 40zm-289.88 88.08-58-57.96a41.04 41.04 0 0 1 58-58l57.96 58a41 41 0 0 1-57.96 57.96zM192 512a40 40 0 0 1-40 40H72a40 40 0 0 1 0-80h80a40 40 0 0 1 40 40zm30.12 231.92a41 41 0 0 1 57.96 57.96l-57.96 58a41.04 41.04 0 0 1-58-58l58-57.96zM512 832a40 40 0 0 1 40 40v80a40 40 0 0 1-80 0v-80a40 40 0 0 1 40-40zm289.88-88.08 58 57.96a41.04 41.04 0 0 1-58 58l-57.96-58a41 41 0 0 1 57.96-57.96z">
                                </path>
                            </svg></button></div>
                    <div class="search-box" role="search" data-v-f3875574><input value="" aria-label="Search" class=""
                            placeholder="Search" autocomplete="off" spellcheck="false" data-v-f3875574><!----></div>
                    <!----><button class="toggle-navbar-button" aria-label="Toggle Navbar" aria-expanded="false"
                        aria-controls="nav-screen"><span class="button-container"><span class="button-top"></span><span
                                class="button-middle"></span><span class="button-bottom"></span></span></button>
                </div>
            </header><!----><!--]--><!---->
            <div class="toggle-sidebar-wrapper"><span class="arrow left"></span></div>
            <aside class="sidebar"><!--[--><!----><!--]-->
                <ul class="sidebar-links">
                    <li>
                        <section class="sidebar-group">
                            <p class="sidebar-heading"><!----><span class="title">指南</span><!----></p>
                            <ul class="sidebar-links">
                                <li><!--[--><a href="../v8.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="阅读须知"><!---->阅读须知<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                            </ul>
                        </section>
                    </li>
                    <li>
                        <section class="sidebar-group">
                            <p class="sidebar-heading active"><!----><span class="title">API文档</span><!----></p>
                            <ul class="sidebar-links">
                                <li><!--[--><a href="../app.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="app - 应用"><!---->app - 应用<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../base64.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="base64"><!---->base64<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../colors.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="colors - 颜色"><!---->colors - 颜色<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../canvas.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="canvas - 画布"><!---->canvas - 画布<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../console.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="console - 控制台"><!---->console - 控制台<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../crypto.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="crypto - 加解密与消息摘要"><!---->crypto - 加解密与消息摘要<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../debug.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="debug - 调试工具"><!---->debug - 调试工具<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../device.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="device - 设备"><!---->device - 设备<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../dialogs.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="dialogs - 对话框"><!---->dialogs - 对话框<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../engines.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="engines - 脚本引擎"><!---->engines - 脚本引擎<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../events.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="events - 事件与监听"><!---->events - 事件与监听<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../floaty.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="floaty - 悬浮窗"><!---->floaty - 悬浮窗<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../files.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="files - 文件系统"><!---->files - 文件系统<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../globals.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="globals - 全局变量与函数"><!---->globals - 全局变量与函数<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../http.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="http - HTTP网络请求"><!---->http - HTTP网络请求<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../media.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="media - 多媒体"><!---->media - 多媒体<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../modules.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="module - 模块"><!---->module - 模块<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../plugins.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="plugins - 插件"><!---->plugins - 插件<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../powerManager.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="power_manager - 电源管理"><!---->power_manager - 电源管理<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../sensors.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="sensors - 传感器"><!---->sensors - 传感器<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../shell.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="shell - Shell命令"><!---->shell - Shell命令<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../storages.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="storages - 本地存储"><!---->storages - 本地存储<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../settings.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="settings - 设置"><!---->settings - 设置<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../threads.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="threads - 多线程"><!---->threads - 多线程<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../timers.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="timers - 定时器"><!---->timers - 定时器<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../timedTasks.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="work_manager - 定时与任务"><!---->work_manager - 定时与任务<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li>
                                    <section class="sidebar-group"><button
                                            class="sidebar-heading clickable active"><!----><span class="title">ui -
                                                用户界面</span><span class="arrow down"></span></button>
                                        <ul class="sidebar-links">
                                            <li><!--[--><a href="ui.html" class="nav-link sidebar-link sidebar-page"
                                                    aria-label="ui入门介绍"><!---->ui入门介绍<!----></a>
                                                <ul class="sidebar-sub-headers"></ul><!--]-->
                                            </li>
                                            <li><!--[--><a aria-current="page" href="basic.html"
                                                    class="router-link-active router-link-exact-active nav-link sidebar-link sidebar-page"
                                                    aria-label="基础布局与控件"><!---->基础布局与控件<!----></a>
                                                <ul class="sidebar-sub-headers">
                                                    <li class="sidebar-sub-header"><a aria-current="page"
                                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#视图-view"
                                                            class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                            aria-label="视图: View"><!---->视图: View<!----></a>
                                                        <ul class="sidebar-sub-headers">
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#attr-name-value"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="attr(name, value)"><!---->attr(name,
                                                                    value)<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#attr-name"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="attr(name)"><!---->attr(name)<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#w"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="w"><!---->w<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#h"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="h"><!---->h<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#id"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="id"><!---->id<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#gravity"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="gravity"><!---->gravity<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#layout-gravity"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="layout_gravity"><!---->layout_gravity<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#margin"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="margin"><!---->margin<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#marginleft"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="marginLeft"><!---->marginLeft<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#marginright"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="marginRight"><!---->marginRight<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#margintop"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="marginTop"><!---->marginTop<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#marginbottom"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="marginBottom"><!---->marginBottom<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#padding"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="padding"><!---->padding<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#paddingleft"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="paddingLeft"><!---->paddingLeft<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#paddingright"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="paddingRight"><!---->paddingRight<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#paddingtop"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="paddingTop"><!---->paddingTop<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#paddingbottom"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="paddingBottom"><!---->paddingBottom<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#bg"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="bg"><!---->bg<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#alpha"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="alpha"><!---->alpha<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#foreground"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="foreground"><!---->foreground<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#minheight"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="minHeight"><!---->minHeight<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#minwidth"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="minWidth"><!---->minWidth<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#visibility"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="visibility"><!---->visibility<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#rotation"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="rotation"><!---->rotation<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#transformpivotx"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="transformPivotX"><!---->transformPivotX<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#transformpivoty"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="transformPivotY"><!---->transformPivotY<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#style"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="style"><!---->style<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#事件-click"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="事件: click"><!---->事件: click<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#事件-long-click"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="事件: long_click"><!---->事件:
                                                                    long_click<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#事件-check"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="事件：check"><!---->事件：check<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li class="sidebar-sub-header"><a aria-current="page"
                                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#文本控件-text"
                                                            class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                            aria-label="文本控件: text"><!---->文本控件: text<!----></a>
                                                        <ul class="sidebar-sub-headers">
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#text"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="text"><!---->text<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#textcolor"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="textColor"><!---->textColor<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#textsize"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="textSize"><!---->textSize<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#textstyle"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="textStyle"><!---->textStyle<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#lines"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="lines"><!---->lines<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#maxlines"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="maxLines"><!---->maxLines<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#typeface"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="typeface"><!---->typeface<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#ellipsize"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="ellipsize"><!---->ellipsize<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#ems"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="ems"><!---->ems<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#autolink"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="autoLink"><!---->autoLink<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li class="sidebar-sub-header"><a aria-current="page"
                                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#按钮控件-button"
                                                            class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                            aria-label="按钮控件: button"><!---->按钮控件: button<!----></a>
                                                        <ul class="sidebar-sub-headers"></ul>
                                                    </li>
                                                    <li class="sidebar-sub-header"><a aria-current="page"
                                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#输入框控�?input"
                                                            class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                            aria-label="输入框控件: input"><!---->输入框控件: input<!----></a>
                                                        <ul class="sidebar-sub-headers">
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#hint"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="hint"><!---->hint<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#textcolorhint"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="textColorHint"><!---->textColorHint<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#textsizehint"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="textSizeHint"><!---->textSizeHint<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#inputtype"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="inputType"><!---->inputType<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#password"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="password"><!---->password<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#numeric"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="numeric"><!---->numeric<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#phonenumber"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="phoneNumber"><!---->phoneNumber<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#digit"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="digit"><!---->digit<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#singleline"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="singleLine"><!---->singleLine<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li class="sidebar-sub-header"><a aria-current="page"
                                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#图片控件-img"
                                                            class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                            aria-label="图片控件: img"><!---->图片控件: img<!----></a>
                                                        <ul class="sidebar-sub-headers">
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#src"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="src"><!---->src<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#tint"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="tint"><!---->tint<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#scaletype"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="scaleType"><!---->scaleType<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#radius"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="radius"><!---->radius<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#radiustopleft"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="radiusTopLeft"><!---->radiusTopLeft<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#radiustopright"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="radiusTopRight"><!---->radiusTopRight<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#radiusbottomleft"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="radiusBottomLeft"><!---->radiusBottomLeft<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#radiusbottomright"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="radiusBottomRight"><!---->radiusBottomRight<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#borderwidth"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="borderWidth"><!---->borderWidth<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#bordercolor"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="borderColor"><!---->borderColor<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#circle"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="circle"><!---->circle<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li class="sidebar-sub-header"><a aria-current="page"
                                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#垂直布局-vertical"
                                                            class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                            aria-label="垂直布局: vertical"><!---->垂直布局: vertical<!----></a>
                                                        <ul class="sidebar-sub-headers">
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#layout-weight"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="layout_weight"><!---->layout_weight<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li class="sidebar-sub-header"><a aria-current="page"
                                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#水平布局-horizontal"
                                                            class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                            aria-label="水平布局: horizontal"><!---->水平布局:
                                                            horizontal<!----></a>
                                                        <ul class="sidebar-sub-headers">
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#layout-weight-1"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="layout_weight"><!---->layout_weight<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li class="sidebar-sub-header"><a aria-current="page"
                                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#线性布局-linear"
                                                            class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                            aria-label="线性布局: linear"><!---->线性布局: linear<!----></a>
                                                        <ul class="sidebar-sub-headers"></ul>
                                                    </li>
                                                    <li class="sidebar-sub-header"><a aria-current="page"
                                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#帧布局-frame"
                                                            class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                            aria-label="帧布局: frame"><!---->帧布局: frame<!----></a>
                                                        <ul class="sidebar-sub-headers">
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#gravity-1"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="gravity"><!---->gravity<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#foreground-1"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="foreground"><!---->foreground<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#foregroundgravity"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="foregroundGravity"><!---->foregroundGravity<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li class="sidebar-sub-header"><a aria-current="page"
                                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#相对布局-relative"
                                                            class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                            aria-label="相对布局: relative"><!---->相对布局: relative<!----></a>
                                                        <ul class="sidebar-sub-headers">
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#以父容器作为参照�?"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="以父容器作为参照物"><!---->以父容器作为参照物<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                            <li class="sidebar-sub-header"><a aria-current="page"
                                                                    href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#以兄弟控件作为参照物"
                                                                    class="router-link-active router-link-exact-active nav-link sidebar-link heading"
                                                                    aria-label="以兄弟控件作为参照物"><!---->以兄弟控件作为参照物<!----></a>
                                                                <ul class="sidebar-sub-headers"></ul>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                </ul><!--]-->
                                            </li>
                                            <li><!--[--><a href="advanced.html"
                                                    class="nav-link sidebar-link sidebar-page"
                                                    aria-label="其他布局与控件"><!---->其他布局与控件<!----></a>
                                                <ul class="sidebar-sub-headers"></ul><!--]-->
                                            </li>
                                            <li><!--[--><a href="api.html" class="nav-link sidebar-link sidebar-page"
                                                    aria-label="api文档"><!---->api文档<!----></a>
                                                <ul class="sidebar-sub-headers"></ul><!--]-->
                                            </li>
                                            <li><!--[--><a href="customWidget.html"
                                                    class="nav-link sidebar-link sidebar-page"
                                                    aria-label="自定义控件"><!---->自定义控件<!----></a>
                                                <ul class="sidebar-sub-headers"></ul><!--]-->
                                            </li>
                                            <li><!--[--><a href="webview.html"
                                                    class="nav-link sidebar-link sidebar-page"
                                                    aria-label="使用Web编写界面"><!---->使用Web编写界面<!----></a>
                                                <ul class="sidebar-sub-headers"></ul><!--]-->
                                            </li>
                                        </ul>
                                    </section>
                                </li>
                                <li><!--[--><a href="../util.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="util - 工具"><!---->util - 工具<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../webSocket.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="WebSocket"><!---->WebSocket<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                                <li><!--[--><a href="../zip.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="zip - 压缩与解压"><!---->zip - 压缩与解压<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                            </ul>
                        </section>
                    </li>
                    <li>
                        <section class="sidebar-group">
                            <p class="sidebar-heading"><!----><span class="title">进阶</span><!----></p>
                            <ul class="sidebar-links">
                                <li><!--[--><a href="../scriptingJava.html" class="nav-link sidebar-link sidebar-page"
                                        aria-label="和Java交互"><!---->和Java交互<!----></a>
                                    <ul class="sidebar-sub-headers"></ul><!--]-->
                                </li>
                            </ul>
                        </section>
                    </li>
                </ul><!--[--><!----><!--]-->
            </aside><!--[-->
            <main class="page" id="main-content"><!--[--><!---->
                <nav class="breadcrumb disable"></nav>
                <div class="page-title">
                    <h1><!---->基础布局与控件</h1>
                    <div class="page-info"><span class="date-info" aria-label="写作日期📅" data-balloon-pos="down"><svg
                                xmlns="http://www.w3.org/2000/svg" class="icon calendar-icon" viewBox="0 0 1024 1024"
                                fill="currentColor" aria-label="calendar icon">
                                <path
                                    d="M716.4 110.137c0-18.753-14.72-33.473-33.472-33.473-18.753 0-33.473 14.72-33.473 33.473v33.473h66.993v-33.473zm-334.87 0c0-18.753-14.72-33.473-33.473-33.473s-33.52 14.72-33.52 33.473v33.473h66.993v-33.473zm468.81 33.52H716.4v100.465c0 18.753-14.72 33.473-33.472 33.473a33.145 33.145 0 01-33.473-33.473V143.657H381.53v100.465c0 18.753-14.72 33.473-33.473 33.473a33.145 33.145 0 01-33.473-33.473V143.657H180.6A134.314 134.314 0 0046.66 277.595v535.756A134.314 134.314 0 00180.6 947.289h669.74a134.36 134.36 0 00133.94-133.938V277.595a134.314 134.314 0 00-133.94-133.938zm33.473 267.877H147.126a33.145 33.145 0 01-33.473-33.473c0-18.752 14.72-33.473 33.473-33.473h736.687c18.752 0 33.472 14.72 33.472 33.473a33.145 33.145 0 01-33.472 33.473z">
                                </path>
                            </svg><span>2022年10月27日</span>
                            <meta property="datePublished" content="2022-10-27T05:15:37.000Z">
                        </span></div>
                    <hr>
                </div>
                <div class="toc-place-holder">
                    <aside id="toc">
                        <div class="toc-header">此页内容</div>
                        <div class="toc-wrapper">
                            <ul class="toc-list"><!--[-->
                                <li class="toc-item"><a aria-current="page"
                                        href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#视图-view"
                                        class="router-link-active router-link-exact-active toc-link level2">视图: View</a>
                                </li>
                                <ul class="toc-list"><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#attr-name-value"
                                            class="router-link-active router-link-exact-active toc-link level3">attr(name,
                                            value)</a></li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#attr-name"
                                            class="router-link-active router-link-exact-active toc-link level3">attr(name)</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#w"
                                            class="router-link-active router-link-exact-active toc-link level3">w</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#h"
                                            class="router-link-active router-link-exact-active toc-link level3">h</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#id"
                                            class="router-link-active router-link-exact-active toc-link level3">id</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#gravity"
                                            class="router-link-active router-link-exact-active toc-link level3">gravity</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#layout-gravity"
                                            class="router-link-active router-link-exact-active toc-link level3">layout_gravity</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#margin"
                                            class="router-link-active router-link-exact-active toc-link level3">margin</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#marginleft"
                                            class="router-link-active router-link-exact-active toc-link level3">marginLeft</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#marginright"
                                            class="router-link-active router-link-exact-active toc-link level3">marginRight</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#margintop"
                                            class="router-link-active router-link-exact-active toc-link level3">marginTop</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#marginbottom"
                                            class="router-link-active router-link-exact-active toc-link level3">marginBottom</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#padding"
                                            class="router-link-active router-link-exact-active toc-link level3">padding</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#paddingleft"
                                            class="router-link-active router-link-exact-active toc-link level3">paddingLeft</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#paddingright"
                                            class="router-link-active router-link-exact-active toc-link level3">paddingRight</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#paddingtop"
                                            class="router-link-active router-link-exact-active toc-link level3">paddingTop</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#paddingbottom"
                                            class="router-link-active router-link-exact-active toc-link level3">paddingBottom</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#bg"
                                            class="router-link-active router-link-exact-active toc-link level3">bg</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#alpha"
                                            class="router-link-active router-link-exact-active toc-link level3">alpha</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#foreground"
                                            class="router-link-active router-link-exact-active toc-link level3">foreground</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#minheight"
                                            class="router-link-active router-link-exact-active toc-link level3">minHeight</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#minwidth"
                                            class="router-link-active router-link-exact-active toc-link level3">minWidth</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#visibility"
                                            class="router-link-active router-link-exact-active toc-link level3">visibility</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#rotation"
                                            class="router-link-active router-link-exact-active toc-link level3">rotation</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#transformpivotx"
                                            class="router-link-active router-link-exact-active toc-link level3">transformPivotX</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#transformpivoty"
                                            class="router-link-active router-link-exact-active toc-link level3">transformPivotY</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#style"
                                            class="router-link-active router-link-exact-active toc-link level3">style</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#事件-click"
                                            class="router-link-active router-link-exact-active toc-link level3">事件:
                                            click</a></li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#事件-long-click"
                                            class="router-link-active router-link-exact-active toc-link level3">事件:
                                            long_click</a></li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#事件-check"
                                            class="router-link-active router-link-exact-active toc-link level3">事件：check</a>
                                    </li><!----><!--]-->
                                </ul><!--]--><!--[-->
                                <li class="toc-item"><a aria-current="page"
                                        href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#文本控件-text"
                                        class="router-link-active router-link-exact-active toc-link level2">文本控件:
                                        text</a></li>
                                <ul class="toc-list"><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#text"
                                            class="router-link-active router-link-exact-active toc-link level3">text</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#textcolor"
                                            class="router-link-active router-link-exact-active toc-link level3">textColor</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#textsize"
                                            class="router-link-active router-link-exact-active toc-link level3">textSize</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#textstyle"
                                            class="router-link-active router-link-exact-active toc-link level3">textStyle</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#lines"
                                            class="router-link-active router-link-exact-active toc-link level3">lines</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#maxlines"
                                            class="router-link-active router-link-exact-active toc-link level3">maxLines</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#typeface"
                                            class="router-link-active router-link-exact-active toc-link level3">typeface</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#ellipsize"
                                            class="router-link-active router-link-exact-active toc-link level3">ellipsize</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#ems"
                                            class="router-link-active router-link-exact-active toc-link level3">ems</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#autolink"
                                            class="router-link-active router-link-exact-active toc-link level3">autoLink</a>
                                    </li><!----><!--]-->
                                </ul><!--]--><!--[-->
                                <li class="toc-item"><a aria-current="page"
                                        href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#按钮控件-button"
                                        class="router-link-active router-link-exact-active toc-link level2">按钮控件:
                                        button</a></li><!----><!--]--><!--[-->
                                <li class="toc-item"><a aria-current="page"
                                        href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#输入框控�?input"
                                        class="router-link-active router-link-exact-active toc-link level2">输入框控件:
                                        input</a></li>
                                <ul class="toc-list"><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#hint"
                                            class="router-link-active router-link-exact-active toc-link level3">hint</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#textcolorhint"
                                            class="router-link-active router-link-exact-active toc-link level3">textColorHint</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#textsizehint"
                                            class="router-link-active router-link-exact-active toc-link level3">textSizeHint</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#inputtype"
                                            class="router-link-active router-link-exact-active toc-link level3">inputType</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#password"
                                            class="router-link-active router-link-exact-active toc-link level3">password</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#numeric"
                                            class="router-link-active router-link-exact-active toc-link level3">numeric</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#phonenumber"
                                            class="router-link-active router-link-exact-active toc-link level3">phoneNumber</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#digit"
                                            class="router-link-active router-link-exact-active toc-link level3">digit</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#singleline"
                                            class="router-link-active router-link-exact-active toc-link level3">singleLine</a>
                                    </li><!----><!--]-->
                                </ul><!--]--><!--[-->
                                <li class="toc-item"><a aria-current="page"
                                        href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#图片控件-img"
                                        class="router-link-active router-link-exact-active toc-link level2">图片控件:
                                        img</a></li>
                                <ul class="toc-list"><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#src"
                                            class="router-link-active router-link-exact-active toc-link level3">src</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#tint"
                                            class="router-link-active router-link-exact-active toc-link level3">tint</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#scaletype"
                                            class="router-link-active router-link-exact-active toc-link level3">scaleType</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#radius"
                                            class="router-link-active router-link-exact-active toc-link level3">radius</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#radiustopleft"
                                            class="router-link-active router-link-exact-active toc-link level3">radiusTopLeft</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#radiustopright"
                                            class="router-link-active router-link-exact-active toc-link level3">radiusTopRight</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#radiusbottomleft"
                                            class="router-link-active router-link-exact-active toc-link level3">radiusBottomLeft</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#radiusbottomright"
                                            class="router-link-active router-link-exact-active toc-link level3">radiusBottomRight</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#borderwidth"
                                            class="router-link-active router-link-exact-active toc-link level3">borderWidth</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#bordercolor"
                                            class="router-link-active router-link-exact-active toc-link level3">borderColor</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#circle"
                                            class="router-link-active router-link-exact-active toc-link level3">circle</a>
                                    </li><!----><!--]-->
                                </ul><!--]--><!--[-->
                                <li class="toc-item"><a aria-current="page"
                                        href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#垂直布局-vertical"
                                        class="router-link-active router-link-exact-active toc-link level2">垂直布局:
                                        vertical</a></li>
                                <ul class="toc-list"><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#layout-weight"
                                            class="router-link-active router-link-exact-active toc-link level3">layout_weight</a>
                                    </li><!----><!--]-->
                                </ul><!--]--><!--[-->
                                <li class="toc-item"><a aria-current="page"
                                        href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#水平布局-horizontal"
                                        class="router-link-active router-link-exact-active toc-link level2">水平布局:
                                        horizontal</a></li>
                                <ul class="toc-list"><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#layout-weight-1"
                                            class="router-link-active router-link-exact-active toc-link level3">layout_weight</a>
                                    </li><!----><!--]-->
                                </ul><!--]--><!--[-->
                                <li class="toc-item"><a aria-current="page"
                                        href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#线性布局-linear"
                                        class="router-link-active router-link-exact-active toc-link level2">线性布局:
                                        linear</a></li><!----><!--]--><!--[-->
                                <li class="toc-item"><a aria-current="page"
                                        href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#帧布局-frame"
                                        class="router-link-active router-link-exact-active toc-link level2">帧布局:
                                        frame</a></li>
                                <ul class="toc-list"><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#gravity-1"
                                            class="router-link-active router-link-exact-active toc-link level3">gravity</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#foreground-1"
                                            class="router-link-active router-link-exact-active toc-link level3">foreground</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#foregroundgravity"
                                            class="router-link-active router-link-exact-active toc-link level3">foregroundGravity</a>
                                    </li><!----><!--]-->
                                </ul><!--]--><!--[-->
                                <li class="toc-item"><a aria-current="page"
                                        href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#相对布局-relative"
                                        class="router-link-active router-link-exact-active toc-link level2">相对布局:
                                        relative</a></li>
                                <ul class="toc-list"><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#以父容器作为参照�?"
                                            class="router-link-active router-link-exact-active toc-link level3">以父容器作为参照物</a>
                                    </li><!----><!--]--><!--[-->
                                    <li class="toc-item"><a aria-current="page"
                                            href="https://pro.autojs.org/docs/zh/v8/ui/basic.html#以兄弟控件作为参照物"
                                            class="router-link-active router-link-exact-active toc-link level3">以兄弟控件作为参照物</a>
                                    </li><!----><!--]-->
                                </ul><!--]-->
                            </ul>
                        </div>
                    </aside>
                </div><!---->
                <div class="theme-hope-content">
                    <h1 id="基础布局与控件" tabindex="-1"><a class="header-anchor" href="#基础布局与控件" aria-hidden="true">#</a>
                        基础布局与控件</h1>
                    <p>本节将介绍所有View共有的属性、方法，以及一些基础控件和基础布局。</p>
                    <h2 id="视图-view" tabindex="-1"><a class="header-anchor" href="#视图-view" aria-hidden="true">#</a> 视图:
                        View</h2>
                    <p>控件和布局都属于视图(View)。在这个章节中将介绍<strong>所有控件和布局的共有的属性和函数</strong>。例如属性背景，宽高等(所有控件和布局都能设置背景和宽高)，函数<code><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code>设置视图(View)被点击时执行的动作。
                    </p>
                    <h3 id="attr-name-value" tabindex="-1"><a class="header-anchor" href="#attr-name-value"
                            aria-hidden="true">#</a> attr(name, value)</h3>
                    <ul>
                        <li><code><span class="token property">name</span></code> {string} 属性名称</li>
                        <li><code><span class="token property">value</span></code> {string} 属性的值</li>
                    </ul>
                    <p>设置属性的值。属性指定是View在xml中的属性。例如可以通过语句<code><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">&quot;text&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;文本&quot;</span><span class="token punctuation">)</span></code>来设置文本控件的文本值。
                    </p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>

$ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>frame<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text id<span class="token operator">=</span><span class="token string">&quot;example&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;Hello&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>frame<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 5秒后执行</span>
$ui<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// 修改文本</span>
    $ui<span class="token punctuation">.</span>example<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">&quot;text&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Hello, Auto.js UI&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 修改背景</span>
    $ui<span class="token punctuation">.</span>example<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">&quot;bg&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;#ff00ff&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 修改高度</span>
    $ui<span class="token punctuation">.</span>example<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">&quot;h&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;500dp&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <div class="custom-container warning">
                        <p class="custom-container-title">注意</p>
                        <p>并不是所有属性都能在js代码设置，有一些属性只能在布局创建时设置，例如style属性；还有一些属性虽然能在代码中设置，但是还没支持。明确不支持的属性在调用<code><span class="token function">attr</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code>时会抛出异常。
                        </p>
                    </div>
                    <h3 id="attr-name" tabindex="-1"><a class="header-anchor" href="#attr-name" aria-hidden="true">#</a>
                        attr(name)</h3>
                    <ul>
                        <li><code><span class="token property">name</span></code> {string} 属性名称</li>
                        <li>返回 {string}</li>
                    </ul>
                    <p>获取属性的值。</p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>

$ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>frame<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text id<span class="token operator">=</span><span class="token string">&quot;example&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;1&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>frame<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">plusOne</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">plusOne</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 获取文本</span>
    <span class="token keyword">let</span> text <span class="token operator">=</span> $ui<span class="token punctuation">.</span>example<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">&quot;text&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 解析为数字</span>
    <span class="token keyword">let</span> num <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 数字加1</span>
    num<span class="token operator">++</span><span class="token punctuation">;</span>
    <span class="token comment">// 设置文本</span>
    $ui<span class="token punctuation">.</span>example<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">&quot;text&quot;</span><span class="token punctuation">,</span> <span class="token function">String</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 1秒后继续</span>
    $ui<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span>plusOne<span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <div class="custom-container warning">
                        <p class="custom-container-title">注意</p>
                        <p>通过<code><span class="token function">attr</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code>方法获取的是通过<code><span class="token function">attr</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code>方法或xml属性设置的值，不能用于获取用户输入而改变等的值，因此更建议用控件自身的方法，比如<code><span class="token function">getText</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code>来获取。
                        </p>
                    </div>
                    <h3 id="w" tabindex="-1"><a class="header-anchor" href="#w" aria-hidden="true">#</a> w</h3>
                    <p>View的宽度，是属性<code><span class="token property">width</span></code>的缩写形式。可以设置的值为<code><span class="token operator">*</span></code>,
                        <code><span class="token property">auto</span></code>和具体数值。其中<code><span class="token operator">*</span></code>表示宽度<strong>尽量</strong>填满父布局，而<code><span class="token property">auto</span></code>表示宽度将根据View的内容自动调整(自适应宽度)。例如：
                    </p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>horizontal<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button w<span class="token operator">=</span><span class="token string">&quot;auto&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;自适应宽度&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button w<span class="token operator">=</span><span class="token string">&quot;*&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;填满父布局&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>horizontal<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <p>在这个例子中，第一个按钮为自适应宽度，第二个按钮为填满父布局，显示效果为：</p>
                    <p><img src="../../../assets/ex-w.b5b5f445.png" alt="ex-w" loading="lazy"></p>
                    <p>如果不设置该属性，则不同的控件和布局有不同的默认宽度，大多数为<code><span class="token property">auto</span></code>。</p>
                    <p>宽度属性也可以指定一个具体数值。例如<code>w<span class="token operator">=</span><span class="token string">&quot;20&quot;</span></code>，<code>w<span class="token operator">=</span><span class="token string">&quot;20px&quot;</span></code>等。不加单位的情况下默认单位为dp，其他单位包括px(像素),
                        mm(毫米), in(英寸)。有关尺寸单位的更多内容，参见<a
                            href="#ui_%E5%B0%BA%E5%AF%B8%E7%9A%84%E5%8D%95%E4%BD%8D_Dimension">尺寸的单位: Dimension</a>。</p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>horizontal<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button w<span class="token operator">=</span><span class="token string">&quot;200&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;宽度200dp&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button w<span class="token operator">=</span><span class="token string">&quot;100&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;宽度100dp&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>horizontal<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <h3 id="h" tabindex="-1"><a class="header-anchor" href="#h" aria-hidden="true">#</a> h</h3>
                    <p>View的高度，是属性<code><span class="token property">height</span></code>的缩写形式。可以设置的值为<code><span class="token operator">*</span></code>,
                        <code><span class="token property">auto</span></code>和具体数值。其中<code><span class="token operator">*</span></code>表示宽度<strong>尽量</strong>填满父布局，而<code><span class="token property">auto</span></code>表示宽度将根据View的内容自动调整(自适应宽度)。
                    </p>
                    <p>如果不设置该属性，则不同的控件和布局有不同的默认高度，大多数为<code><span class="token property">auto</span></code>。</p>
                    <p>宽度属性也可以指定一个具体数值。例如<code>h<span class="token operator">=</span><span class="token string">&quot;20&quot;</span></code>，<code>h<span class="token operator">=</span><span class="token string">&quot;20px&quot;</span></code>等。不加单位的情况下默认单位为dp，其他单位包括px(像素),
                        mm(毫米), in(英寸)。有关尺寸单位的更多内容，参见<a
                            href="#ui_%E5%B0%BA%E5%AF%B8%E7%9A%84%E5%8D%95%E4%BD%8D_Dimension">尺寸的单位: Dimension</a>。</p>
                    <h3 id="id" tabindex="-1"><a class="header-anchor" href="#id" aria-hidden="true">#</a> id</h3>
                    <p>View的id，用来区分一个界面下的不同控件和布局，一个界面的id在同一个界面下通常是唯一的，也就是一般不存在两个View有相同的id。id属性也是连接xml布局和JavaScript代码的桥梁，在代码中可以通过一个View的id来获取到这个View，并对他进行操作(设置点击动作、设置属性、获取属性等)。例如：
                    </p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>frame<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button id<span class="token operator">=</span><span class="token string">&quot;ok&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;确定&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>frame<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//通过ui.ok获取到按钮控件</span>
<span class="token function">toast</span><span class="token punctuation">(</span>ui<span class="token punctuation">.</span>ok<span class="token punctuation">.</span><span class="token function">getText</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <p>这个例子中有一个按钮控件&quot;确定&quot;，id属性为&quot;ok&quot;，那么我们可以在代码中使用<code>ui<span class="token punctuation">.</span>ok</code>来获取他，再通过<code><span class="token function">getText</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code>函数获取到这个按钮控件的文本内容。
                        另外这个例子中使用帧布局(frame)是因为，我们只有一个控件，因此用于最简单的布局帧布局。</p>
                    <h3 id="gravity" tabindex="-1"><a class="header-anchor" href="#gravity" aria-hidden="true">#</a>
                        gravity</h3>
                    <p>View的&quot;重力&quot;。用于决定View的内容相对于View的位置，可以设置的值为:</p>
                    <ul>
                        <li><code><span class="token property">left</span></code> 靠左</li>
                        <li><code><span class="token property">right</span></code> 靠右</li>
                        <li><code><span class="token property">top</span></code> 靠顶部</li>
                        <li><code><span class="token property">bottom</span></code> 靠底部</li>
                        <li><code><span class="token property">center</span></code> 居中</li>
                        <li><code><span class="token property">center_vertical</span></code> 垂直居中</li>
                        <li><code><span class="token property">center_horizontal</span></code> 水平居中</li>
                    </ul>
                    <p>例如对于一个按钮控件，<code>gravity<span class="token operator">=</span><span class="token string">&quot;right&quot;</span></code>会使其中的文本内容靠右显示。例如：
                    </p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>frame<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button gravity<span class="token operator">=</span><span class="token string">&quot;right&quot;</span> w<span class="token operator">=</span><span class="token string">&quot;*&quot;</span> h<span class="token operator">=</span><span class="token string">&quot;auto&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;靠右的文字&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>frame<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <p>显示效果为:</p>
                    <p><img src="../../../assets/ex-gravity.9a64f0f9.png" alt="ex-gravity" loading="lazy"></p>
                    <p>这些属性是可以组合的，例如<code>gravity<span class="token operator">=</span><span class="token string">&quot;right|bottom&quot;</span></code>的View他的内容会在右下角。
                    </p>
                    <h3 id="layout-gravity" tabindex="-1"><a class="header-anchor" href="#layout-gravity"
                            aria-hidden="true">#</a> layout_gravity</h3>
                    <p>View在布局中的&quot;重力&quot;，用于决定View本身在他的<strong>父布局</strong>的位置，可以设置的值和gravity属性相同。注意把这个属性和gravity属性区分开来。
                    </p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>frame w<span class="token operator">=</span><span class="token string">&quot;*&quot;</span> h<span class="token operator">=</span><span class="token string">&quot;*&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button layout_gravity<span class="token operator">=</span><span class="token string">&quot;center&quot;</span> w<span class="token operator">=</span><span class="token string">&quot;auto&quot;</span> h<span class="token operator">=</span><span class="token string">&quot;auto&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;居中的按钮&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button layout_gravity<span class="token operator">=</span><span class="token string">&quot;right|bottom&quot;</span> w<span class="token operator">=</span><span class="token string">&quot;auto&quot;</span> h<span class="token operator">=</span><span class="token string">&quot;auto&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;右下角的按钮&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>frame<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <p>在这个例子中，我们让帧布局(frame)的大小占满整个屏幕，通过给第一个按钮设置属性<code>layout_gravity<span class="token operator">=</span><span class="token string">&quot;center&quot;</span></code>来使得按钮在帧布局中居中，通过给第二个按钮设置属性<code>layout_gravity<span class="token operator">=</span><span class="token string">&quot;right|bottom&quot;</span></code>使得他在帧布局中位于右下角。效果如图：
                    </p>
                    <p><img src="../../../assets/ex-layout-gravity.9b42f6fe.png" alt="ex-layout-gravity" loading="lazy">
                    </p>
                    <p>要注意的是，layout_gravity的属性不一定总是生效的，具体取决于布局的类别。例如不能让水平布局中的第一个子控件靠底部显示(否则和水平布局本身相违背)。</p>
                    <h3 id="margin" tabindex="-1"><a class="header-anchor" href="#margin" aria-hidden="true">#</a>
                        margin</h3>
                    <p>margin为View和其他View的间距，即外边距。margin属性包括四个值:</p>
                    <ul>
                        <li><code><span class="token property">marginLeft</span></code> 左外边距</li>
                        <li><code><span class="token property">marginRight</span></code> 右外边距</li>
                        <li><code><span class="token property">marginTop</span></code> 上外边距</li>
                        <li><code><span class="token property">marginBottom</span></code> 下外边距</li>
                    </ul>
                    <p>而margin属性本身的值可以有三种格式:</p>
                    <ul>
                        <li><code>margin<span class="token operator">=</span><span class="token string">&quot;marginAll&quot;</span></code>
                            指定各个外边距都是该值。例如<code>margin<span class="token operator">=</span><span class="token string">&quot;10&quot;</span></code>表示左右上下边距都是10dp。
                        </li>
                        <li><code>margin<span class="token operator">=</span><span class="token string">&quot;marginLeft marginTop marginRight marginBottom&quot;</span></code>
                            分别指定各个外边距。例如<code>margin<span class="token operator">=</span><span class="token string">&quot;10 20 30 40&quot;</span></code>表示左边距为10dp,
                            上边距为20dp, 右边距为30dp, 下边距为40dp</li>
                        <li><code>margin<span class="token operator">=</span><span class="token string">&quot;marginHorizontal marginVertical&quot;</span></code>
                            指定水平外边距和垂直外边距。例如<code>margin<span class="token operator">=</span><span class="token string">&quot;10 20&quot;</span></code>表示左右边距为10dp,
                            上下边距为20dp。</li>
                    </ul>
                    <p>用一个例子来具体理解外边距的含义：</p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>horizontal<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button margin<span class="token operator">=</span><span class="token string">&quot;30&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;距离四周30&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button text<span class="token operator">=</span><span class="token string">&quot;普通的按钮&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>horizontal<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <p>第一个按钮的margin属性指定了他的边距为30dp, 也就是他与水平布局以及第二个按钮的间距都是30dp, 其显示效果如图:</p>
                    <p><img src="../../../assets/ex1-margin.204ad0e5.png" alt="ex1-margin" loading="lazy"></p>
                    <p>如果把<code>margin<span class="token operator">=</span><span class="token string">&quot;30&quot;</span></code>改成<code>margin<span class="token operator">=</span><span class="token string">&quot;10 40&quot;</span></code>那么第一个按钮的左右间距为10dp,
                        上下间距为40dp, 效果如图:</p>
                    <p><img src="../../../assets/ex2-margin.3d58ccba.png" alt="ex2-margin" loading="lazy"></p>
                    <p>有关margin属性的单位，参见<a href="#ui_%E5%B0%BA%E5%AF%B8%E7%9A%84%E5%8D%95%E4%BD%8D_Dimension">尺寸的单位:
                            Dimension</a>。</p>
                    <h3 id="marginleft" tabindex="-1"><a class="header-anchor" href="#marginleft"
                            aria-hidden="true">#</a> marginLeft</h3>
                    <p>View的左外边距。如果该属性和margin属性指定的值冲突，则在后面的属性生效，前面的属性无效，例如<code>margin<span class="token operator">=</span><span class="token string">&quot;20&quot;</span> marginLeft<span class="token operator">=</span><span class="token string">&quot;10&quot;</span></code>的左外边距为10dp，其他外边距为20dp。
                    </p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>horizontal<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button marginLeft<span class="token operator">=</span><span class="token string">&quot;50&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;距离左边50&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button text<span class="token operator">=</span><span class="token string">&quot;普通的按钮&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>horizontal<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <p>第一个按钮指定了左外边距为50dp，则他和他的父布局水平布局(horizontal)的左边的间距为50dp, 效果如图：</p>
                    <p><img src="../../../assets/ex-marginLeft.6cff2e2a.png" alt="ex-marginLeft" loading="lazy"></p>
                    <h3 id="marginright" tabindex="-1"><a class="header-anchor" href="#marginright"
                            aria-hidden="true">#</a> marginRight</h3>
                    <p>View的右外边距。如果该属性和margin属性指定的值冲突，则在后面的属性生效，前面的属性无效。</p>
                    <h3 id="margintop" tabindex="-1"><a class="header-anchor" href="#margintop" aria-hidden="true">#</a>
                        marginTop</h3>
                    <p>View的上外边距。如果该属性和margin属性指定的值冲突，则在后面的属性生效，前面的属性无效。</p>
                    <h3 id="marginbottom" tabindex="-1"><a class="header-anchor" href="#marginbottom"
                            aria-hidden="true">#</a> marginBottom</h3>
                    <p>View的下外边距。如果该属性和margin属性指定的值冲突，则在后面的属性生效，前面的属性无效。</p>
                    <h3 id="padding" tabindex="-1"><a class="header-anchor" href="#padding" aria-hidden="true">#</a>
                        padding</h3>
                    <p>View和他的自身内容的间距，也就是内边距。注意和margin属性区分开来，margin属性是View之间的间距，而padding是View和他自身内容的间距。举个例子，一个文本控件的padding也即文本控件的边缘和他的文本内容的间距，paddingLeft即文本控件的左边和他的文本内容的间距。
                    </p>
                    <p>padding属性的值同样有三种格式：</p>
                    <ul>
                        <li><code>padding<span class="token operator">=</span><span class="token string">&quot;paddingAll&quot;</span></code>
                            指定各个内边距都是该值。例如<code>padding<span class="token operator">=</span><span class="token string">&quot;10&quot;</span></code>表示左右上下内边距都是10dp。
                        </li>
                        <li><code>padding<span class="token operator">=</span><span class="token string">&quot;paddingLeft paddingTop paddingRight paddingBottom&quot;</span></code>
                            分别指定各个内边距。例如<code>padding<span class="token operator">=</span><span class="token string">&quot;10 20 30 40&quot;</span></code>表示左内边距为10dp,
                            上内边距为20dp, 右内边距为30dp, 下内边距为40dp</li>
                        <li><code>padding<span class="token operator">=</span><span class="token string">&quot;paddingHorizontal paddingVertical&quot;</span></code>
                            指定水平内边距和垂直内边距。例如<code>padding<span class="token operator">=</span><span class="token string">&quot;10 20&quot;</span></code>表示左右内边距为10dp,
                            上下内边距为20dp。</li>
                    </ul>
                    <p>用一个例子来具体理解内边距的含义：</p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>frame w<span class="token operator">=</span><span class="token string">&quot;*&quot;</span> h<span class="token operator">=</span><span class="token string">&quot;*&quot;</span> gravity<span class="token operator">=</span><span class="token string">&quot;center&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text padding<span class="token operator">=</span><span class="token string">&quot;10 20 30 40&quot;</span> bg<span class="token operator">=</span><span class="token string">&quot;#ff0000&quot;</span> w<span class="token operator">=</span><span class="token string">&quot;auto&quot;</span> h<span class="token operator">=</span><span class="token string">&quot;auto&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;HelloWorld&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>frame<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <p>这个例子是一个居中的按钮(通过父布局的<code>gravity<span class="token operator">=</span><span class="token string">&quot;center&quot;</span></code>属性设置)，背景色为红色(<code>bg<span class="token operator">=</span><span class="token string">&quot;#ff0000&quot;</span></code>)，文本内容为&quot;HelloWorld&quot;，左边距为10dp，上边距为20dp，下边距为30dp，右边距为40dp，其显示效果如图：
                    </p>
                    <p><img src="../../../assets/ex-padding.9975cd64.png" alt="ex-padding" loading="lazy"></p>
                    <h3 id="paddingleft" tabindex="-1"><a class="header-anchor" href="#paddingleft"
                            aria-hidden="true">#</a> paddingLeft</h3>
                    <p>View的左内边距。如果该属性和padding属性指定的值冲突，则在后面的属性生效，前面的属性无效。</p>
                    <h3 id="paddingright" tabindex="-1"><a class="header-anchor" href="#paddingright"
                            aria-hidden="true">#</a> paddingRight</h3>
                    <p>View的右内边距。如果该属性和padding属性指定的值冲突，则在后面的属性生效，前面的属性无效。</p>
                    <h3 id="paddingtop" tabindex="-1"><a class="header-anchor" href="#paddingtop"
                            aria-hidden="true">#</a> paddingTop</h3>
                    <p>View的上内边距。如果该属性和padding属性指定的值冲突，则在后面的属性生效，前面的属性无效。</p>
                    <h3 id="paddingbottom" tabindex="-1"><a class="header-anchor" href="#paddingbottom"
                            aria-hidden="true">#</a> paddingBottom</h3>
                    <p>View的下内边距。如果该属性和padding属性指定的值冲突，则在后面的属性生效，前面的属性无效。</p>
                    <h3 id="bg" tabindex="-1"><a class="header-anchor" href="#bg" aria-hidden="true">#</a> bg</h3>
                    <p>View的背景。其值可以是一个链接或路径指向的图片，或者RGB格式的颜色，或者其他背景。具体参见<a href="#draw">Drawables</a>。</p>
                    <p>例如，<code>bg<span class="token operator">=</span><span class="token string">&quot;#00ff00&quot;</span></code>设置背景为绿色，<code>bg<span class="token operator">=</span><span class="token string">&quot;file:///sdcard/1.png&quot;</span></code>设置背景为图片&quot;1.png&quot;，<code>bg<span class="token operator">=</span><span class="token string">&quot;?attr/selectableItemBackground&quot;</span></code>设置背景为点击时出现的波纹效果(可能需要同时设置<code>clickable<span class="token operator">=</span><span class="token string">&quot;true&quot;</span></code>才生效)。
                    </p>
                    <h3 id="alpha" tabindex="-1"><a class="header-anchor" href="#alpha" aria-hidden="true">#</a> alpha
                    </h3>
                    <p>View的透明度，其值是一个0~1之间的小数，0表示完全透明，1表示完全不透明。例如<code>alpha<span class="token operator">=</span><span class="token string">&quot;0.5&quot;</span></code>表示半透明。
                    </p>
                    <h3 id="foreground" tabindex="-1"><a class="header-anchor" href="#foreground"
                            aria-hidden="true">#</a> foreground</h3>
                    <p>View的前景。前景即在一个View的内容上显示的内容，可能会覆盖掉View本身的内容。其值和属性bg的值类似。</p>
                    <h3 id="minheight" tabindex="-1"><a class="header-anchor" href="#minheight" aria-hidden="true">#</a>
                        minHeight</h3>
                    <p>View的最小高度。该值不总是生效的，取决于其父布局是否有足够的空间容纳。</p>
                    <p>例：<code><span class="token operator">&lt;</span>text height<span class="token operator">=</span><span class="token string">&quot;auto&quot;</span> minHeight<span class="token operator">=</span><span class="token string">&quot;50&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span></code>
                    </p>
                    <p>有关该属性的单位，参见<a href="#ui_%E5%B0%BA%E5%AF%B8%E7%9A%84%E5%8D%95%E4%BD%8D_Dimension">尺寸的单位:
                            Dimension</a>。</p>
                    <h3 id="minwidth" tabindex="-1"><a class="header-anchor" href="#minwidth" aria-hidden="true">#</a>
                        minWidth</h3>
                    <p>View的最小宽度。该值不总是生效的，取决于其父布局是否有足够的空间容纳。</p>
                    <p>例：<code><span class="token operator">&lt;</span>input width<span class="token operator">=</span><span class="token string">&quot;auto&quot;</span> minWidth<span class="token operator">=</span><span class="token string">&quot;50&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span></code>
                    </p>
                    <p>有关该属性的单位，参见<a href="#ui_%E5%B0%BA%E5%AF%B8%E7%9A%84%E5%8D%95%E4%BD%8D_Dimension">尺寸的单位:
                            Dimension</a>。</p>
                    <h3 id="visibility" tabindex="-1"><a class="header-anchor" href="#visibility"
                            aria-hidden="true">#</a> visibility</h3>
                    <p>View的可见性，该属性可以决定View是否显示出来。其值可以为：</p>
                    <ul>
                        <li><code><span class="token property">gone</span></code> 不可见。</li>
                        <li><code><span class="token property">visible</span></code> 可见。默认情况下View都是可见的。</li>
                        <li><code><span class="token property">invisible</span></code> 不可见，但仍然占用位置。</li>
                    </ul>
                    <h3 id="rotation" tabindex="-1"><a class="header-anchor" href="#rotation" aria-hidden="true">#</a>
                        rotation</h3>
                    <p>View的旋转角度。通过该属性可以让这个View顺时针旋转一定的角度。例如<code>rotation<span class="token operator">=</span><span class="token string">&quot;90&quot;</span></code>可以让他顺时针旋转90度。
                    </p>
                    <p>如果要设置旋转中心，可以通过<code><span class="token property">transformPivotX</span></code>,
                        <code><span class="token property">transformPivotY</span></code>属性设置。默认的旋转中心为View的中心。</p>
                    <h3 id="transformpivotx" tabindex="-1"><a class="header-anchor" href="#transformpivotx"
                            aria-hidden="true">#</a> transformPivotX</h3>
                    <p>View的变换中心坐标x。用于View的旋转、放缩等变换的中心坐标。例如<code>transformPivotX<span class="token operator">=</span><span class="token string">&quot;10&quot;</span></code>。
                    </p>
                    <p>该坐标的坐标系以View的左上角为原点。也就是x值为变换中心到View的左边的距离。</p>
                    <p>有关该属性的单位，参见<a href="#ui_%E5%B0%BA%E5%AF%B8%E7%9A%84%E5%8D%95%E4%BD%8D_Dimension">尺寸的单位:
                            Dimension</a>。</p>
                    <h3 id="transformpivoty" tabindex="-1"><a class="header-anchor" href="#transformpivoty"
                            aria-hidden="true">#</a> transformPivotY</h3>
                    <p>View的变换中心坐标y。用于View的旋转、放缩等变换的中心坐标。例如<code>transformPivotY<span class="token operator">=</span><span class="token string">&quot;10&quot;</span></code>。
                    </p>
                    <p>该坐标的坐标系以View的左上角为原点。也就是y值为变换中心到View的上边的距离。</p>
                    <p>有关该属性的单位，参见<a href="#ui_%E5%B0%BA%E5%AF%B8%E7%9A%84%E5%8D%95%E4%BD%8D_Dimension">尺寸的单位:
                            Dimension</a>。</p>
                    <h3 id="style" tabindex="-1"><a class="header-anchor" href="#style" aria-hidden="true">#</a> style
                    </h3>
                    <p>设置View的样式。不同控件有不同的可选的内置样式。具体参见各个控件的说明。</p>
                    <p>需要注意的是，style属性只支持安卓5.1及其以上。</p>
                    <h3 id="事件-click" tabindex="-1"><a class="header-anchor" href="#事件-click" aria-hidden="true">#</a>
                        事件: <code><span class="token property">click</span></code></h3>
                    <p>当用户点击时会触发该事件。</p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
$ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>vertical padding<span class="token operator">=</span><span class="token string">&quot;16&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button id<span class="token operator">=</span><span class="token string">&quot;click_me&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;点我&quot;</span> w<span class="token operator">=</span><span class="token string">&quot;auto&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>vertical<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

$ui<span class="token punctuation">.</span>click_me<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">&quot;我被点啦&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <h3 id="事件-long-click" tabindex="-1"><a class="header-anchor" href="#事件-long-click"
                            aria-hidden="true">#</a> 事件: <code><span class="token property">long_click</span></code>
                    </h3>
                    <ul>
                        <li>event {object} 事件，字段有： <ul>
                                <li><code><span class="token property">consumed</span></code> {boolean} 设置此事件是否被消费</li>
                                <li><code><span class="token property">view</span></code> {View} 此事件对应的View</li>
                            </ul>
                        </li>
                    </ul>
                    <p>当用户长按时会触发该事件。</p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
$ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>vertical padding<span class="token operator">=</span><span class="token string">&quot;16&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button id<span class="token operator">=</span><span class="token string">&quot;click_me&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;点我&quot;</span> w<span class="token operator">=</span><span class="token string">&quot;auto&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>vertical<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
$ui<span class="token punctuation">.</span>click_me<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;long_click&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">&quot;我被长按啦&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 消费事件</span>
    event<span class="token punctuation">.</span>consumed <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <h3 id="事件-check" tabindex="-1"><a class="header-anchor" href="#事件-check" aria-hidden="true">#</a>
                        事件：<code><span class="token property">check</span></code></h3>
                    <ul>
                        <li><code><span class="token property">checked</span></code> {boolean} 是否被勾选</li>
                        <li><code><span class="token property">view</span></code> {View} 当前事件的View</li>
                    </ul>
                    <p>当用户勾选/取消勾选选项框时会触发该事件，<code><span class="token property">Switch</span></code>,
                        <code><span class="token property">checkbox</span></code>,
                        <code><span class="token property">radio</span></code>等控件才有该事件。</p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
$ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>vertical padding<span class="token operator">=</span><span class="token string">&quot;16&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>checkbox id<span class="token operator">=</span><span class="token string">&quot;cb1&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;复选框&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>vertical<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
$ui<span class="token punctuation">.</span>cb1<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;check&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">checked</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>checked<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">&quot;被勾选了&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">&quot;被取消勾选了&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <h2 id="文本控件-text" tabindex="-1"><a class="header-anchor" href="#文本控件-text" aria-hidden="true">#</a>
                        文本控件: text</h2>
                    <blockquote>
                        <p>参见Android <a href="https://developer.android.google.cn/reference/android/widget/TextView"
                                target="_blank" rel="noopener noreferrer">TextView<span><svg class="external-link-icon"
                                        xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px"
                                        y="0px" viewBox="0 0 100 100" width="15" height="15">
                                        <path fill="currentColor"
                                            d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                                        </path>
                                        <polygon fill="currentColor"
                                            points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                                        </polygon>
                                    </svg><span class="external-link-icon-sr-only">open in new window</span></span></a>。
                        </p>
                    </blockquote>
                    <p>文本控件用于显示文本，可以控制文本的字体大小，字体颜色，字体等。</p>
                    <p>以下介绍该控件的主要属性和方法，如果要查看他的所有属性和方法，请阅读<a
                            href="https://developer.android.google.cn/reference/android/widget/TextView.html"
                            target="_blank" rel="noopener noreferrer">TextView<span><svg class="external-link-icon"
                                    xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px"
                                    y="0px" viewBox="0 0 100 100" width="15" height="15">
                                    <path fill="currentColor"
                                        d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                                    </path>
                                    <polygon fill="currentColor"
                                        points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                                    </polygon>
                                </svg><span class="external-link-icon-sr-only">open in new window</span></span></a>。</p>
                    <h3 id="text" tabindex="-1"><a class="header-anchor" href="#text" aria-hidden="true">#</a> text</h3>
                    <p>设置文本的内容。例如<code>text<span class="token operator">=</span><span class="token string">&quot;一段文本&quot;</span></code>。
                    </p>
                    <h3 id="textcolor" tabindex="-1"><a class="header-anchor" href="#textcolor" aria-hidden="true">#</a>
                        textColor</h3>
                    <p>设置字体的颜色，可以是RGB格式的颜色(例如#ff00ff)，或者颜色名称(例如red, green等)，具体参见<a href="#ui_%E9%A2%9C%E8%89%B2">颜色</a>。
                    </p>
                    <p>示例,
                        红色字体：<code><span class="token operator">&lt;</span>text text<span class="token operator">=</span><span class="token string">&quot;红色字体&quot;</span> textColor<span class="token operator">=</span><span class="token string">&quot;red&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span></code>
                    </p>
                    <h3 id="textsize" tabindex="-1"><a class="header-anchor" href="#textsize" aria-hidden="true">#</a>
                        textSize</h3>
                    <p>设置字体的大小，单位一般是sp。按照Material Design的规范，正文字体大小为14sp，标题字体大小为18sp，次标题为16sp。</p>
                    <p>示例，超大字体:
                        <code><span class="token operator">&lt;</span>text text<span class="token operator">=</span><span class="token string">&quot;超大字体&quot;</span> textSize<span class="token operator">=</span><span class="token string">&quot;40sp&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span></code>
                    </p>
                    <h3 id="textstyle" tabindex="-1"><a class="header-anchor" href="#textstyle" aria-hidden="true">#</a>
                        textStyle</h3>
                    <p>设置字体的样式，比如斜体、粗体等。可选的值为：</p>
                    <ul>
                        <li>bold 加粗字体</li>
                        <li>italic 斜体</li>
                        <li>normal 正常字体</li>
                    </ul>
                    <p>可以用或(&quot;|&quot;)把他们组合起来，比如粗斜体为&quot;bold|italic&quot;。</p>
                    <p>例如，粗体：`<text textStyle="bold" textSize="18sp" text="这是粗体"></text></p>
                    <h3 id="lines" tabindex="-1"><a class="header-anchor" href="#lines" aria-hidden="true">#</a> lines
                    </h3>
                    <p>设置文本控件的行数。即使文本内容没有达到设置的行数，控件也会留出相应的宽度来显示空白行；如果文本内容超出了设置的行数，则超出的部分不会显示。</p>
                    <p>另外在xml中是不能设置多行文本的，要在代码中设置。例如:</p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>vertical<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text id<span class="token operator">=</span><span class="token string">&quot;myText&quot;</span> line<span class="token operator">=</span><span class="token string">&quot;3&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>vertical<span class="token operator">&gt;</span>
<span class="token punctuation">)</span>
<span class="token comment">//通过\n换行</span>
ui<span class="token punctuation">.</span>myText<span class="token punctuation">.</span><span class="token function">setText</span><span class="token punctuation">(</span><span class="token string">&quot;第一行\n第二行\n第三行\n第四行&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <h3 id="maxlines" tabindex="-1"><a class="header-anchor" href="#maxlines" aria-hidden="true">#</a>
                        maxLines</h3>
                    <p>设置文本控件的最大行数。</p>
                    <h3 id="typeface" tabindex="-1"><a class="header-anchor" href="#typeface" aria-hidden="true">#</a>
                        typeface</h3>
                    <p>设置字体。可选的值为：</p>
                    <ul>
                        <li><code><span class="token property">normal</span></code> 正常字体</li>
                        <li><code><span class="token property">sans</span></code> 衬线字体</li>
                        <li><code><span class="token property">serif</span></code> 非衬线字体</li>
                        <li><code><span class="token property">monospace</span></code> 等宽字体</li>
                    </ul>
                    <p>示例，等宽字体:
                        <code><span class="token operator">&lt;</span>text text<span class="token operator">=</span><span class="token string">&quot;等宽字体&quot;</span> typeface<span class="token operator">=</span><span class="token string">&quot;monospace&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span></code>
                    </p>
                    <h3 id="ellipsize" tabindex="-1"><a class="header-anchor" href="#ellipsize" aria-hidden="true">#</a>
                        ellipsize</h3>
                    <p>设置文本的省略号位置。文本的省略号会在文本内容超出文本控件时显示。可选的值为：</p>
                    <ul>
                        <li><code><span class="token property">end</span></code> 在文本末尾显示省略号</li>
                        <li><code><span class="token property">marquee</span></code> 跑马灯效果，文本将滚动显示</li>
                        <li><code><span class="token property">middle</span></code> 在文本中间显示省略号</li>
                        <li><code><span class="token property">none</span></code> 不显示省略号</li>
                        <li><code><span class="token property">start</span></code> 在文本开头显示省略号</li>
                    </ul>
                    <h3 id="ems" tabindex="-1"><a class="header-anchor" href="#ems" aria-hidden="true">#</a> ems</h3>
                    <p>当设置该属性后,TextView显示的字符长度（单位是em）,超出的部分将不显示，或者根据ellipsize属性的设置显示省略号。</p>
                    <p>例如，限制文本最长为5em: `<text ems="5" ellipsize="end" text="很长很长很长很长很长很长很长的文本"></text></p>
                    <h3 id="autolink" tabindex="-1"><a class="header-anchor" href="#autolink" aria-hidden="true">#</a>
                        autoLink</h3>
                    <p>控制是否自动找到url和电子邮件地址等链接，并转换为可点击的链接。默认值为“none”。</p>
                    <p>设置该值可以让文本中的链接、电话等变成可点击状态。</p>
                    <p>可选的值为以下的值以其通过或(&quot;|&quot;)的组合：</p>
                    <ul>
                        <li><code><span class="token property">all</span></code> 匹配所有连接、邮件、地址、电话</li>
                        <li><code><span class="token property">email</span></code> 匹配电子邮件地址</li>
                        <li><code><span class="token property">map</span></code> 匹配地图地址</li>
                        <li><code><span class="token property">none</span></code> 不匹配 (默认)</li>
                        <li><code><span class="token property">phone</span></code> 匹配电话号码</li>
                        <li><code><span class="token property">web</span></code> 匹配URL地址</li>
                    </ul>
                    <p>示例：<code><span class="token operator">&lt;</span>text autoLink<span class="token operator">=</span><span class="token string">&quot;web|phone&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;百度: http://www.baidu.com 电信电话: 10000&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span></code>
                    </p>
                    <h2 id="按钮控件-button" tabindex="-1"><a class="header-anchor" href="#按钮控件-button"
                            aria-hidden="true">#</a> 按钮控件: button</h2>
                    <blockquote>
                        <p>参见Android <a href="https://developer.android.google.cn/reference/android/widget/Button"
                                target="_blank" rel="noopener noreferrer">Button<span><svg class="external-link-icon"
                                        xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px"
                                        y="0px" viewBox="0 0 100 100" width="15" height="15">
                                        <path fill="currentColor"
                                            d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                                        </path>
                                        <polygon fill="currentColor"
                                            points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                                        </polygon>
                                    </svg><span class="external-link-icon-sr-only">open in new window</span></span></a>。
                        </p>
                    </blockquote>
                    <p>按钮控件是一个特殊的文本控件，因此所有文本控件的函数的属性都适用于按钮控件。</p>
                    <p>除此之外，按钮控件有一些内置的样式，通过<code><span class="token property">style</span></code>属性设置，包括：</p>
                    <ul>
                        <li>Widget.AppCompat.Button.Colored 带颜色的按钮</li>
                        <li>Widget.AppCompat.Button.Borderless 无边框按钮</li>
                        <li>Widget.AppCompat.Button.Borderless.Colored 带颜色的无边框按钮</li>
                    </ul>
                    <p>这些样式的具体效果参见&quot;示例/界面控件/按钮控件.js&quot;。</p>
                    <p>例如：<code><span class="token operator">&lt;</span>button style<span class="token operator">=</span><span class="token string">&quot;Widget.AppCompat.Button.Colored&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;漂亮的按钮&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span></code>
                    </p>
                    <h2 id="输入框控件-input" tabindex="-1"><a class="header-anchor" href="#输入框控件-input"
                            aria-hidden="true">#</a> 输入框控件: input</h2>
                    <blockquote>
                        <p>参见Android <a href="https://developer.android.google.cn/reference/android/widget/EditText"
                                target="_blank" rel="noopener noreferrer">EditText<span><svg class="external-link-icon"
                                        xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px"
                                        y="0px" viewBox="0 0 100 100" width="15" height="15">
                                        <path fill="currentColor"
                                            d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                                        </path>
                                        <polygon fill="currentColor"
                                            points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                                        </polygon>
                                    </svg><span class="external-link-icon-sr-only">open in new window</span></span></a>。
                        </p>
                    </blockquote>
                    <p>输入框控件也是一个特殊的文本控件，因此所有文本控件的函数的属性和函数都适用于按钮控件。输入框控件有自己的属性和函数，要查看所有这些内容，阅读<a
                            href="https://developer.android.google.cn/reference/android/widget/EditText.html"
                            target="_blank" rel="noopener noreferrer">EditText<span><svg class="external-link-icon"
                                    xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px"
                                    y="0px" viewBox="0 0 100 100" width="15" height="15">
                                    <path fill="currentColor"
                                        d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                                    </path>
                                    <polygon fill="currentColor"
                                        points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                                    </polygon>
                                </svg><span class="external-link-icon-sr-only">open in new window</span></span></a>。</p>
                    <p>对于一个输入框控件，我们可以通过text属性设置他的内容，通过lines属性指定输入框的行数；在代码中通过<code><span class="token function">getText</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code>函数获取输入的内容。例如：
                    </p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>vertical padding<span class="token operator">=</span><span class="token string">&quot;16&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text textSize<span class="token operator">=</span><span class="token string">&quot;16sp&quot;</span> textColor<span class="token operator">=</span><span class="token string">&quot;black&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;请输入姓名&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>input id<span class="token operator">=</span><span class="token string">&quot;name&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;小明&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button id<span class="token operator">=</span><span class="token string">&quot;ok&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;确定&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>vertical<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//指定确定按钮点击时要执行的动作</span>
ui<span class="token punctuation">.</span>ok<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//通过getText()获取输入的内容</span>
    <span class="token keyword">var</span> name <span class="token operator">=</span> ui<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">getText</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">toast</span><span class="token punctuation">(</span>name <span class="token operator">+</span> <span class="token string">&quot;您好!&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <p>除此之外，输入框控件有另外一些主要属性(虽然这些属性对于文本控件也是可用的但一般只用于输入框控件)：</p>
                    <h3 id="hint" tabindex="-1"><a class="header-anchor" href="#hint" aria-hidden="true">#</a> hint</h3>
                    <p>输入提示。这个提示会在输入框为空的时候显示出来。</p>
                    <p>上面图片效果的代码为：</p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>vertical<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>input hint<span class="token operator">=</span><span class="token string">&quot;请输入姓名&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>vertical<span class="token operator">&gt;</span>
<span class="token punctuation">)</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <h3 id="textcolorhint" tabindex="-1"><a class="header-anchor" href="#textcolorhint"
                            aria-hidden="true">#</a> textColorHint</h3>
                    <p>指定输入提示的字体颜色。</p>
                    <h3 id="textsizehint" tabindex="-1"><a class="header-anchor" href="#textsizehint"
                            aria-hidden="true">#</a> textSizeHint</h3>
                    <p>指定输入提示的字体大小。</p>
                    <h3 id="inputtype" tabindex="-1"><a class="header-anchor" href="#inputtype" aria-hidden="true">#</a>
                        inputType</h3>
                    <p>指定输入框可以输入的文本类型。可选的值为以下值及其用&quot;|&quot;的组合:</p>
                    <ul>
                        <li><code><span class="token property">date</span></code> 用于输入日期。</li>
                        <li><code><span class="token property">datetime</span></code> 用于输入日期和时间。</li>
                        <li><code><span class="token property">none</span></code> 没有内容类型。此输入框不可编辑。</li>
                        <li><code><span class="token property">number</span></code> 仅可输入数字。</li>
                        <li><code><span class="token property">numberDecimal</span></code>
                            可以与number和它的其他选项组合，以允许输入十进制数(包括小数)。</li>
                        <li><code><span class="token property">numberPassword</span></code> 仅可输入数字密码。</li>
                        <li><code><span class="token property">numberSigned</span></code> 可以与number和它的其他选项组合，以允许输入有符号的数。
                        </li>
                        <li><code><span class="token property">phone</span></code> 用于输入一个电话号码。</li>
                        <li><code><span class="token property">text</span></code> 只是普通文本。</li>
                        <li><code><span class="token property">textAutoComplete</span></code> 可以与text和它的其他选项结合,
                            以指定此字段将做自己的自动完成, 并适当地与输入法交互。</li>
                        <li><code><span class="token property">textAutoCorrect</span></code> 可以与text和它的其他选项结合,
                            以请求自动文本输入纠错。</li>
                        <li><code><span class="token property">textCapCharacters</span></code> 可以与text和它的其他选项结合,
                            以请求大写所有字符。</li>
                        <li><code><span class="token property">textCapSentences</span></code> 可以与text和它的其他选项结合,
                            以请求大写每个句子里面的第一个字符。</li>
                        <li><code><span class="token property">textCapWords</span></code> 可以与text和它的其他选项结合,
                            以请求大写每个单词里面的第一个字符。</li>
                        <li><code><span class="token property">textEmailAddress</span></code> 用于输入一个电子邮件地址。</li>
                        <li><code><span class="token property">textEmailSubject</span></code> 用于输入电子邮件的主题。</li>
                        <li><code><span class="token property">textImeMultiLine</span></code>
                            可以与text和它的其他选项结合，以指示虽然常规文本视图不应为多行, 但如果可以, 则IME应提供多行支持。</li>
                        <li><code><span class="token property">textLongMessage</span></code> 用于输入长消息的内容。</li>
                        <li><code><span class="token property">textMultiLine</span></code> 可以与text和它的其他选项结合,
                            以便在该字段中允许多行文本。如果未设置此标志, 则文本字段将被限制为单行。</li>
                        <li><code><span class="token property">textNoSuggestions</span></code> 可以与text及它的其他选项结合,
                            以指示输入法不应显示任何基于字典的单词建议。</li>
                        <li><code><span class="token property">textPassword</span></code> 用于输入密码。</li>
                        <li><code><span class="token property">textPersonName</span></code> 用于输入人名。</li>
                        <li><code><span class="token property">textPhonetic</span></code> 用于输入拼音发音的文本, 如联系人条目中的拼音名称字段。
                        </li>
                        <li><code><span class="token property">textPostalAddress</span></code> 用于输入邮寄地址。</li>
                        <li><code><span class="token property">textShortMessage</span></code> 用于输入短的消息内容。</li>
                        <li><code><span class="token property">textUri</span></code> 用于输入一个URI。</li>
                        <li><code><span class="token property">textVisiblePassword</span></code> 用于输入可见的密码。</li>
                        <li><code><span class="token property">textWebEditText</span></code> 用于输入在web表单中的文本。</li>
                        <li><code><span class="token property">textWebEmailAddress</span></code> 用于在web表单里输入一个电子邮件地址。
                        </li>
                        <li><code><span class="token property">textWebPassword</span></code> 用于在web表单里输入一个密码。</li>
                        <li><code><span class="token property">time</span></code> 用于输入时间。</li>
                    </ul>
                    <p>例如，想指定一个输入框的输入类型为小数数字，为:
                        <code><span class="token operator">&lt;</span>input inputType<span class="token operator">=</span><span class="token string">&quot;number|numberDecimal&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span></code>
                    </p>
                    <h3 id="password" tabindex="-1"><a class="header-anchor" href="#password" aria-hidden="true">#</a>
                        password</h3>
                    <p>指定输入框输入框是否为密码输入框。默认为<code><span class="token boolean">false</span></code>。</p>
                    <p>例如：<code><span class="token operator">&lt;</span>input password<span class="token operator">=</span><span class="token string">&quot;true&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span></code>
                    </p>
                    <h3 id="numeric" tabindex="-1"><a class="header-anchor" href="#numeric" aria-hidden="true">#</a>
                        numeric</h3>
                    <p>指定输入框输入框是否为数字输入框。默认为<code><span class="token boolean">false</span></code>。</p>
                    <p>例如：<code><span class="token operator">&lt;</span>input numeric<span class="token operator">=</span><span class="token string">&quot;true&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span></code>
                    </p>
                    <h3 id="phonenumber" tabindex="-1"><a class="header-anchor" href="#phonenumber"
                            aria-hidden="true">#</a> phoneNumber</h3>
                    <p>指定输入框输入框是否为电话号码输入框。默认为<code><span class="token boolean">false</span></code>。</p>
                    <p>例如：<code><span class="token operator">&lt;</span>input phoneNumber<span class="token operator">=</span><span class="token string">&quot;true&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span></code>
                    </p>
                    <h3 id="digit" tabindex="-1"><a class="header-anchor" href="#digit" aria-hidden="true">#</a> digit
                    </h3>
                    <p>指定输入框可以输入的字符。例如，要指定输入框只能输入&quot;1234567890+-&quot;，为<code><span class="token operator">&lt;</span>input digit<span class="token operator">=</span><span class="token string">&quot;1234567890+-&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span></code>。
                    </p>
                    <h3 id="singleline" tabindex="-1"><a class="header-anchor" href="#singleline"
                            aria-hidden="true">#</a> singleLine</h3>
                    <p>指定输入框是否为单行输入框。默认为<code><span class="token boolean">false</span></code>。您也可以通过<code>lines<span class="token operator">=</span><span class="token string">&quot;1&quot;</span></code>来指定单行输入框。
                    </p>
                    <p>例如：<code><span class="token operator">&lt;</span>input singleLine<span class="token operator">=</span><span class="token string">&quot;true&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span></code>
                    </p>
                    <h2 id="图片控件-img" tabindex="-1"><a class="header-anchor" href="#图片控件-img" aria-hidden="true">#</a>
                        图片控件: img</h2>
                    <blockquote>
                        <p>参见Android <a href="https://developer.android.google.cn/reference/android/widget/ImageView"
                                target="_blank" rel="noopener noreferrer">ImageView<span><svg class="external-link-icon"
                                        xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px"
                                        y="0px" viewBox="0 0 100 100" width="15" height="15">
                                        <path fill="currentColor"
                                            d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                                        </path>
                                        <polygon fill="currentColor"
                                            points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                                        </polygon>
                                    </svg><span class="external-link-icon-sr-only">open in new window</span></span></a>。
                        </p>
                    </blockquote>
                    <p>图片控件用于显示来自网络、本地或者内嵌数据的图片，并可以指定图片以圆角矩形、圆形等显示。但是不能用于显示gif动态图。</p>
                    <p>这里只介绍他的主要方法和属性，如果要查看他的所有方法和属性，阅读<a
                            href="https://developer.android.google.cn/reference/android/widget/ImageView.html"
                            target="_blank" rel="noopener noreferrer">ImageView<span><svg class="external-link-icon"
                                    xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px"
                                    y="0px" viewBox="0 0 100 100" width="15" height="15">
                                    <path fill="currentColor"
                                        d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                                    </path>
                                    <polygon fill="currentColor"
                                        points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                                    </polygon>
                                </svg><span class="external-link-icon-sr-only">open in new window</span></span></a>。</p>
                    <h3 id="src" tabindex="-1"><a class="header-anchor" href="#src" aria-hidden="true">#</a> src</h3>
                    <p>使用一个Uri指定图片的来源。可以是图片的地址(http://....)，本地路径(file://....)或者base64数据(&quot;data:image/png;base64,...&quot;)。
                    </p>
                    <p>如果使用图片地址或本地路径，Auto.js会自动使用适当的缓存来储存这些图片，减少下次加载的时间。</p>
                    <p>例如，显示百度的logo:</p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>frame<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>img src<span class="token operator">=</span><span class="token string">&quot;https://www.baidu.com/img/bd_logo1.png&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>frame<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <p>再例如，显示文件/sdcard/1.png的图片为
                        <code><span class="token operator">&lt;</span>img src<span class="token operator">=</span><span class="token string">&quot;file:///sdcard/1.png&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span></code>。
                        再例如，使base64显示一张钱包小图片为：</p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>frame<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>img w<span class="token operator">=</span><span class="token string">&quot;40&quot;</span> h<span class="token operator">=</span><span class="token string">&quot;40&quot;</span> src<span class="token operator">=</span><span class="token string">&quot;&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>frame<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <h3 id="tint" tabindex="-1"><a class="header-anchor" href="#tint" aria-hidden="true">#</a> tint</h3>
                    <p>图片着色，其值是一个颜色名称或RGB颜色值。使用该属性会将图片中的非透明区域都涂上同一颜色。可以用于改变图片的颜色。</p>
                    <p>例如，对于上面的base64的图片:
                        <code><span class="token operator">&lt;</span>img w<span class="token operator">=</span><span class="token string">&quot;40&quot;</span> h<span class="token operator">=</span><span class="token string">&quot;40&quot;</span> tint<span class="token operator">=</span><span class="token string">&quot;red&quot;</span> src<span class="token operator">=</span><span class="token string">&quot;data:image/png;base64,...&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span></code>，则钱包图标颜色会变成红色。
                    </p>
                    <h3 id="scaletype" tabindex="-1"><a class="header-anchor" href="#scaletype" aria-hidden="true">#</a>
                        scaleType</h3>
                    <p>控制图片根据图片控件的宽高放缩时的模式。可选的值为：</p>
                    <ul>
                        <li><code><span class="token property">center</span></code> 在控件中居中显示图像, 但不执行缩放。</li>
                        <li><code><span class="token property">centerCrop</span></code> 保持图像的长宽比缩放图片, 使图像的尺寸 (宽度和高度)
                            等于或大于控件的相应尺寸 (不包括内边距padding)并且使图像在控件中居中显示。</li>
                        <li><code><span class="token property">centerInside</span></code> 保持图像的长宽比缩放图片, 使图像的尺寸 (宽度和高度)
                            小于视图的相应尺寸 (不包括内边距padding)并且图像在控件中居中显示。</li>
                        <li><code><span class="token property">fitCenter</span></code> 保持图像的长宽比缩放图片,
                            使图片的宽<strong>或</strong>高和控件的宽高相同并使图片在控件中居中显示</li>
                        <li><code><span class="token property">fitEnd</span></code> 保持图像的长宽比缩放图片,
                            使图片的宽<strong>或</strong>高和控件的宽高相同并使图片在控件中靠右下角显示</li>
                        <li><code><span class="token property">fitStart</span></code> 保持图像的长宽比缩放图片,
                            使图片的宽<strong>或</strong>高和控件的宽高相同并使图片在控件靠左上角显示</li>
                        <li><code><span class="token property">fitXY</span></code> 使图片和宽高和控件的宽高完全匹配，但图片的长宽比可能不能保持一致</li>
                        <li><code><span class="token property">matrix</span></code>
                            绘制时使用图像矩阵进行缩放。需要在代码中使用<code><span class="token function">setImageMatrix</span><span class="token punctuation">(</span>Matrix<span class="token punctuation">)</span></code>函数才能生效。
                        </li>
                    </ul>
                    <p>默认的scaleType为<code><span class="token property">fitCenter</span></code>；除此之外最常用的是<code><span class="token property">fitXY</span></code>，
                        他能使图片放缩到控件一样的大小，但图片可能会变形。</p>
                    <h3 id="radius" tabindex="-1"><a class="header-anchor" href="#radius" aria-hidden="true">#</a>
                        radius</h3>
                    <p>图片控件的半径。如果设置为控件宽高的一半并且控件的宽高相同则图片将剪切为圆形显示；否则图片为圆角矩形显示，半径即为四个圆角的半径，也可以通过<code><span class="token property">radiusTopLeft</span></code>,
                        <code><span class="token property">radiusTopRight</span></code>,
                        <code><span class="token property">radiusBottomLeft</span></code>,
                        <code><span class="token property">radiusBottomRight</span></code>等属性分别设置四个圆角的半径。</p>
                    <p>例如，圆角矩形的Auto.js图标：<code><span class="token operator">&lt;</span>img w<span class="token operator">=</span><span class="token string">&quot;100&quot;</span> h<span class="token operator">=</span><span class="token string">&quot;100&quot;</span> radius<span class="token operator">=</span><span class="token string">&quot;20&quot;</span> bg<span class="token operator">=</span><span class="token string">&quot;white&quot;</span> src<span class="token operator">=</span><span class="token string">&quot;http://www.autojs.org/assets/uploads/profile/3-profileavatar.png&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span></code>
                    </p>
                    <p>有关该属性的单位，参见<a href="#ui_%E5%B0%BA%E5%AF%B8%E7%9A%84%E5%8D%95%E4%BD%8D_Dimension">尺寸的单位:
                            Dimension</a>。</p>
                    <h3 id="radiustopleft" tabindex="-1"><a class="header-anchor" href="#radiustopleft"
                            aria-hidden="true">#</a> radiusTopLeft</h3>
                    <p>图片控件的左上角圆角的半径。有关该属性的单位，参见<a
                            href="#ui_%E5%B0%BA%E5%AF%B8%E7%9A%84%E5%8D%95%E4%BD%8D_Dimension">尺寸的单位: Dimension</a>。</p>
                    <h3 id="radiustopright" tabindex="-1"><a class="header-anchor" href="#radiustopright"
                            aria-hidden="true">#</a> radiusTopRight</h3>
                    <p>图片控件的右上角圆角的半径。有关该属性的单位，参见<a
                            href="#ui_%E5%B0%BA%E5%AF%B8%E7%9A%84%E5%8D%95%E4%BD%8D_Dimension">尺寸的单位: Dimension</a>。</p>
                    <h3 id="radiusbottomleft" tabindex="-1"><a class="header-anchor" href="#radiusbottomleft"
                            aria-hidden="true">#</a> radiusBottomLeft</h3>
                    <p>图片控件的左下角圆角的半径。有关该属性的单位，参见<a
                            href="#ui_%E5%B0%BA%E5%AF%B8%E7%9A%84%E5%8D%95%E4%BD%8D_Dimension">尺寸的单位: Dimension</a>。</p>
                    <h3 id="radiusbottomright" tabindex="-1"><a class="header-anchor" href="#radiusbottomright"
                            aria-hidden="true">#</a> radiusBottomRight</h3>
                    <p>图片控件的右下角圆角的半径。有关该属性的单位，参见<a
                            href="#ui_%E5%B0%BA%E5%AF%B8%E7%9A%84%E5%8D%95%E4%BD%8D_Dimension">尺寸的单位: Dimension</a>。</p>
                    <h3 id="borderwidth" tabindex="-1"><a class="header-anchor" href="#borderwidth"
                            aria-hidden="true">#</a> borderWidth</h3>
                    <p>图片控件的边框宽度。用于在图片外面显示一个边框，边框会随着图片控件的外形(圆角等)改变而相应变化。 例如,
                        圆角矩形带灰色边框的Auto.js图标：<code><span class="token operator">&lt;</span>img w<span class="token operator">=</span><span class="token string">&quot;100&quot;</span> h<span class="token operator">=</span><span class="token string">&quot;100&quot;</span> radius<span class="token operator">=</span><span class="token string">&quot;20&quot;</span> borderWidth<span class="token operator">=</span><span class="token string">&quot;5&quot;</span> borderColor<span class="token operator">=</span><span class="token string">&quot;gray&quot;</span> bg<span class="token operator">=</span><span class="token string">&quot;white&quot;</span> src<span class="token operator">=</span><span class="token string">&quot;http://www.autojs.org/assets/uploads/profile/3-profileavatar.png&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span></code>
                    </p>
                    <h3 id="bordercolor" tabindex="-1"><a class="header-anchor" href="#bordercolor"
                            aria-hidden="true">#</a> borderColor</h3>
                    <p>图片控件的边框颜色。</p>
                    <h3 id="circle" tabindex="-1"><a class="header-anchor" href="#circle" aria-hidden="true">#</a>
                        circle</h3>
                    <p>指定该图片控件的图片是否剪切为圆形显示。如果为<code><span class="token boolean">true</span></code>，则图片控件会使其宽高保持一致(如果宽高不一致，则保持高度等于宽度)并使圆形的半径为宽度的一半。
                    </p>
                    <p>例如，圆形的Auto.js图标：<code><span class="token operator">&lt;</span>img w<span class="token operator">=</span><span class="token string">&quot;100&quot;</span> h<span class="token operator">=</span><span class="token string">&quot;100&quot;</span> circle<span class="token operator">=</span><span class="token string">&quot;true&quot;</span> bg<span class="token operator">=</span><span class="token string">&quot;white&quot;</span> src<span class="token operator">=</span><span class="token string">&quot;http://www.autojs.org/assets/uploads/profile/3-profileavatar.png&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span></code>
                    </p>
                    <h2 id="垂直布局-vertical" tabindex="-1"><a class="header-anchor" href="#垂直布局-vertical"
                            aria-hidden="true">#</a> 垂直布局: vertical</h2>
                    <p>垂直布局是一种比较简单的布局，会把在它里面的控件按照垂直方向依次摆放，如下图所示：</p>
                    <p>垂直布局:</p>
                    <p>—————</p>
                    <p>| 控件1 |</p>
                    <p>| 控件2 |</p>
                    <p>| 控件3 |</p>
                    <p>| ............ |</p>
                    <p>——————</p>
                    <h3 id="layout-weight" tabindex="-1"><a class="header-anchor" href="#layout-weight"
                            aria-hidden="true">#</a> layout_weight</h3>
                    <p>垂直布局中的控件可以通过<code><span class="token property">layout_weight</span></code>属性来控制控件高度占垂直布局高度的比例。如果为一个控件指定<code><span class="token property">layout_weight</span></code>,
                        则这个控件的高度=垂直布局剩余高度 * layout_weight / weightSum；如果不指定weightSum,
                        则weightSum为所有子控件的layout_weight之和。所谓&quot;剩余高度&quot;，指的是垂直布局中减去没有指定layout_weight的控件的剩余高度。 例如:</p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>vertical h<span class="token operator">=</span><span class="token string">&quot;100dp&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text layout_weight<span class="token operator">=</span><span class="token string">&quot;1&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;控件1&quot;</span> bg<span class="token operator">=</span><span class="token string">&quot;#ff0000&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text layout_weight<span class="token operator">=</span><span class="token string">&quot;1&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;控件2&quot;</span> bg<span class="token operator">=</span><span class="token string">&quot;#00ff00&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text layout_weight<span class="token operator">=</span><span class="token string">&quot;1&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;控件3&quot;</span> bg<span class="token operator">=</span><span class="token string">&quot;#0000ff&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>vertical<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <p>在这个布局中，三个控件的layout_weight都是1，也就是他们的高度都会占垂直布局高度的1/3，都是33.3dp. 再例如：</p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>vertical h<span class="token operator">=</span><span class="token string">&quot;100dp&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text layout_weight<span class="token operator">=</span><span class="token string">&quot;1&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;控件1&quot;</span> bg<span class="token operator">=</span><span class="token string">&quot;#ff0000&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text layout_weight<span class="token operator">=</span><span class="token string">&quot;2&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;控件2&quot;</span> bg<span class="token operator">=</span><span class="token string">&quot;#00ff00&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text layout_weight<span class="token operator">=</span><span class="token string">&quot;1&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;控件3&quot;</span> bg<span class="token operator">=</span><span class="token string">&quot;#0000ff&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>vertical<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <p>在这个布局中，第一个控件高度为1/4, 第二个控件为2/4, 第三个控件为1/4. 再例如：</p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>vertical h<span class="token operator">=</span><span class="token string">&quot;100dp&quot;</span> weightSum<span class="token operator">=</span><span class="token string">&quot;5&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text layout_weight<span class="token operator">=</span><span class="token string">&quot;1&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;控件1&quot;</span> bg<span class="token operator">=</span><span class="token string">&quot;#ff0000&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text layout_weight<span class="token operator">=</span><span class="token string">&quot;2&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;控件2&quot;</span> bg<span class="token operator">=</span><span class="token string">&quot;#00ff00&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text layout_weight<span class="token operator">=</span><span class="token string">&quot;1&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;控件3&quot;</span> bg<span class="token operator">=</span><span class="token string">&quot;#0000ff&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>vertical<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <p>在这个布局中，因为指定了weightSum为5, 因此第一个控件高度为1/5, 第二个控件为2/5, 第三个控件为1/5. 再例如：</p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>vertical h<span class="token operator">=</span><span class="token string">&quot;100dp&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text h<span class="token operator">=</span><span class="token string">&quot;40dp&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;控件1&quot;</span> bg<span class="token operator">=</span><span class="token string">&quot;#ff0000&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text layout_weight<span class="token operator">=</span><span class="token string">&quot;2&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;控件2&quot;</span> bg<span class="token operator">=</span><span class="token string">&quot;#00ff00&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text layout_weight<span class="token operator">=</span><span class="token string">&quot;1&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;控件3&quot;</span> bg<span class="token operator">=</span><span class="token string">&quot;#0000ff&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>vertical<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <p>在这个布局中，第一个控件并没有指定layout_weight, 而是指定高度为40dp,
                        因此不加入比例计算，此时布局剩余高度为60dp。第二个控件高度为剩余高度的2/3，也就是40dp，第三个控件高度为剩余高度的1/3，也就是20dp。</p>
                    <p>垂直布局的layout_weight属性还可以用于控制他的子控件高度占满剩余空间，例如：</p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>
ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>vertical h<span class="token operator">=</span><span class="token string">&quot;100dp&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text h<span class="token operator">=</span><span class="token string">&quot;40dp&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;控件1&quot;</span> bg<span class="token operator">=</span><span class="token string">&quot;#ff0000&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text h<span class="token operator">=</span><span class="token string">&quot;40dp&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;控件2&quot;</span> bg<span class="token operator">=</span><span class="token string">&quot;#00ff00&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text layout_weight<span class="token operator">=</span><span class="token string">&quot;1&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;控件3&quot;</span> bg<span class="token operator">=</span><span class="token string">&quot;#0000ff&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>vertical<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <p>在这个布局中，第三个控件的高度会占满除去控件1和控件2的剩余空间。</p>
                    <h2 id="水平布局-horizontal" tabindex="-1"><a class="header-anchor" href="#水平布局-horizontal"
                            aria-hidden="true">#</a> 水平布局: horizontal</h2>
                    <p>水平布局是一种比较简单的布局，会把在它里面的控件按照水平方向依次摆放，如下图所示： 水平布局: ————————————————————————————</p>
                    <p>| 控件1 | 控件2 | 控件3 | ... |</p>
                    <p>————————————————————————————</p>
                    <h3 id="layout-weight-1" tabindex="-1"><a class="header-anchor" href="#layout-weight-1"
                            aria-hidden="true">#</a> layout_weight</h3>
                    <p>水平布局中也可以使用layout_weight属性来控制子控件的<strong>宽度</strong>占父布局的比例。和垂直布局中类似，不再赘述。</p>
                    <h2 id="线性布局-linear" tabindex="-1"><a class="header-anchor" href="#线性布局-linear"
                            aria-hidden="true">#</a> 线性布局: linear</h2>
                    <blockquote>
                        <p>参见Android <a href="https://developer.android.google.cn/reference/android/widget/LinearLayout"
                                target="_blank" rel="noopener noreferrer">LinearLayout<span><svg
                                        class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                                        focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15">
                                        <path fill="currentColor"
                                            d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                                        </path>
                                        <polygon fill="currentColor"
                                            points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                                        </polygon>
                                    </svg><span class="external-link-icon-sr-only">open in new window</span></span></a>。
                        </p>
                    </blockquote>
                    <p>实际上，垂直布局和水平布局都属于线性布局。线性布局有一个orientation的属性，用于指定布局的方向，可选的值为<code><span class="token property">vertical</span></code>和<code><span class="token property">horizontal</span></code>。
                    </p>
                    <p>例如<code><span class="token operator">&lt;</span>linear orientation<span class="token operator">=</span><span class="token string">&quot;vertical&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>linear<span class="token operator">&gt;</span></code>相当于<code><span class="token operator">&lt;</span>vertical<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>vertical<span class="token operator">&gt;</span></code>。
                    </p>
                    <p>线性布局的默认方向是横向的，因此，一个没有指定orientation属性的线性布局就是横向布局。</p>
                    <h2 id="帧布局-frame" tabindex="-1"><a class="header-anchor" href="#帧布局-frame" aria-hidden="true">#</a>
                        帧布局: frame</h2>
                    <blockquote>
                        <p>参见Android <a href="https://developer.android.google.cn/reference/android/widget/FrameLayout"
                                target="_blank" rel="noopener noreferrer">FrameLayout<span><svg
                                        class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                                        focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15">
                                        <path fill="currentColor"
                                            d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                                        </path>
                                        <polygon fill="currentColor"
                                            points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                                        </polygon>
                                    </svg><span class="external-link-icon-sr-only">open in new window</span></span></a>。
                        </p>
                    </blockquote>
                    <p>帧布局是最简单的布局，它默认从容器的左上角(0,0)坐标开始布局，多个子控件层叠排序，后面的控件会覆盖前面的控件。</p>
                    <h3 id="gravity-1" tabindex="-1"><a class="header-anchor" href="#gravity-1" aria-hidden="true">#</a>
                        gravity</h3>
                    <p>设置布局的默认重力位置。默认为容器的左上角。比如设置<code>gravity<span class="token operator">=</span><span class="token string">&quot;center&quot;</span></code>后，它的子控件会默认居中显示。gravity的详细字段说明参见<a
                            href="#gravity">View.gravity</a>。</p>
                    <p>可以用<code><span class="token property">layout_gravity</span></code>单独控制子控件的重力，参见<a
                            href="#layout-gravity">View.layout_gravity</a>。</p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>

$ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token comment">//设置前景图像及它的位置</span>
    <span class="token operator">&lt;</span>frame gravity<span class="token operator">=</span><span class="token string">&quot;left|top&quot;</span> foreground<span class="token operator">=</span><span class="token string">&quot;@drawable/ic_android_black_48dp&quot;</span> foregroundGravity<span class="token operator">=</span><span class="token string">&quot;right|bottom&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>img w<span class="token operator">=</span><span class="token string">&quot;*&quot;</span> h<span class="token operator">=</span><span class="token string">&quot;*&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token comment">//text控件设置不同大小与背景色,依次覆盖</span>
        <span class="token operator">&lt;</span>text w<span class="token operator">=</span><span class="token string">&quot;300dp&quot;</span> h<span class="token operator">=</span><span class="token string">&quot;300dp&quot;</span> background<span class="token operator">=</span><span class="token string">&quot;#2F2F4F&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text w<span class="token operator">=</span><span class="token string">&quot;200dp&quot;</span> h<span class="token operator">=</span><span class="token string">&quot;200dp&quot;</span> background<span class="token operator">=</span><span class="token string">&quot;#FF1CAE&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>text w<span class="token operator">=</span><span class="token string">&quot;100dp&quot;</span> h<span class="token operator">=</span><span class="token string">&quot;100dp&quot;</span> background<span class="token operator">=</span><span class="token string">&quot;#6B4226&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>frame<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <h3 id="foreground-1" tabindex="-1"><a class="header-anchor" href="#foreground-1"
                            aria-hidden="true">#</a> foreground</h3>
                    <p>设置改帧布局容器的前景图像，前景图像将永远处于帧布局最上面，不会被覆盖。<code><span class="token property">foreground</span></code>属性的取值可以是颜色、图片路径等，和背景<code><span class="token property">bg</span></code>属性类似，参见<a
                            href="#bg">bg</a>。</p>
                    <h3 id="foregroundgravity" tabindex="-1"><a class="header-anchor" href="#foregroundgravity"
                            aria-hidden="true">#</a> foregroundGravity</h3>
                    <p>设置前景图像（foreground）显示的位置。属性与gravity属性相同。</p>
                    <h2 id="相对布局-relative" tabindex="-1"><a class="header-anchor" href="#相对布局-relative"
                            aria-hidden="true">#</a> 相对布局: relative</h2>
                    <blockquote>
                        <p>参见Android <a
                                href="https://developer.android.google.cn/reference/android/widget/RelativeLayout"
                                target="_blank" rel="noopener noreferrer">RelativeLayout<span><svg
                                        class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                                        focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15">
                                        <path fill="currentColor"
                                            d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                                        </path>
                                        <polygon fill="currentColor"
                                            points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                                        </polygon>
                                    </svg><span class="external-link-icon-sr-only">open in new window</span></span></a>。
                        </p>
                    </blockquote>
                    <p>相对布局会把在它里面的控件以父容器和兄弟控件作为参照来确定控件的位置。</p>
                    <h3 id="以父容器作为参照物" tabindex="-1"><a class="header-anchor" href="#以父容器作为参照物" aria-hidden="true">#</a>
                        以父容器作为参照物</h3>
                    <p>在相对布局中，可以以父容器作为参照物来确定其他控件的位置。</p>
                    <p>————— ————— ————— ————— ————— —————</p>
                    <p>| 控件1：左上角 | | 控件4：上居中 | | 控件7：右上角 |</p>
                    <p>| 控件2：左居中 | | 控件5：（居中)| | 控件8：右居中 |</p>
                    <p>| 控件3：左下角 | | 控件6：下居中 | | 控件9：右下角 |</p>
                    <p>————— ————— ————— ————— ————— —————</p>
                    <p>在以父容器作为参照物中，属性如下：</p>
                    <ul>
                        <li>
                            <p><code>layout_alignParentLeft<span class="token operator">=</span><span class="token string">&quot;true&quot;</span></code>
                                以父容器为参照物，使控件贴在父容器的左边。</p>
                        </li>
                        <li>
                            <p><code>layout_alignParentRight<span class="token operator">=</span><span class="token string">&quot;true&quot;</span></code>
                                以父容器为参照物，使控件贴在父容器的右边。</p>
                        </li>
                        <li>
                            <p><code>layout_alignParentTop<span class="token operator">=</span><span class="token string">&quot;true&quot;</span></code>
                                以父容器为参照物，使控件贴在父容器的顶部。</p>
                        </li>
                        <li>
                            <p><code>layout_alignParentBottom<span class="token operator">=</span><span class="token string">&quot;true&quot;</span></code>
                                以父容器为参照物，使控件贴在父容器的底部。</p>
                        </li>
                        <li>
                            <p><code>layout_centerHorizontal<span class="token operator">=</span><span class="token string">&quot;true&quot;</span></code>
                                以父容器为参照物，使控件在父容器的水平方向居中。</p>
                        </li>
                        <li>
                            <p><code>layout_centerVertical<span class="token operator">=</span><span class="token string">&quot;true&quot;</span></code>
                                以父容器为参照物，使控件在父容器的垂直方向居中。</p>
                        </li>
                        <li>
                            <p><code>layout_centerInParent<span class="token operator">=</span><span class="token string">&quot;true&quot;</span></code>
                                以父容器为参照物，使控件在父容器的水平、垂直方向都居中。</p>
                        </li>
                    </ul>
                    <p>可以通过这6个属性的组合让控件处于父容器的左上角、右上角、左下角、右下角、上居中、下居中、左居中、右居中、正居中的位置。例如给一个控件添加<code>layout_alignParentLeft<span class="token operator">=</span><span class="token string">&quot;true&quot;</span></code>和<code>layout_alignParentBottom<span class="token operator">=</span><span class="token string">&quot;true&quot;</span></code>属性后，该空间将以父容器为参照物，使控件位于父容器的左下角。
                    </p>
                    <p>示例：</p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>

$ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>relative<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button text<span class="token operator">=</span><span class="token string">&quot;居中&quot;</span> layout_centerInParent<span class="token operator">=</span><span class="token string">&quot;true&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button text<span class="token operator">=</span><span class="token string">&quot;左上角&quot;</span> layout_alignParentLeft<span class="token operator">=</span><span class="token string">&quot;true&quot;</span> layout_alignParentTop<span class="token operator">=</span><span class="token string">&quot;true&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button text<span class="token operator">=</span><span class="token string">&quot;右上角&quot;</span> layout_alignParentRight<span class="token operator">=</span><span class="token string">&quot;true&quot;</span> layout_alignParentTop<span class="token operator">=</span><span class="token string">&quot;true&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button text<span class="token operator">=</span><span class="token string">&quot;左下角&quot;</span> layout_alignParentLeft<span class="token operator">=</span><span class="token string">&quot;true&quot;</span> layout_alignParentBottom<span class="token operator">=</span><span class="token string">&quot;true&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button text<span class="token operator">=</span><span class="token string">&quot;右下角&quot;</span> layout_alignParentRight<span class="token operator">=</span><span class="token string">&quot;true&quot;</span> layout_alignParentBottom<span class="token operator">=</span><span class="token string">&quot;true&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button text<span class="token operator">=</span><span class="token string">&quot;上居中&quot;</span> layout_alignParentTop<span class="token operator">=</span><span class="token string">&quot;true&quot;</span>  layout_centerHorizontal<span class="token operator">=</span><span class="token string">&quot;true&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button text<span class="token operator">=</span><span class="token string">&quot;下居中&quot;</span> layout_alignParentBottom<span class="token operator">=</span><span class="token string">&quot;true&quot;</span> layout_centerHorizontal<span class="token operator">=</span><span class="token string">&quot;true&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button text<span class="token operator">=</span><span class="token string">&quot;左居中&quot;</span> layout_alignParentLeft<span class="token operator">=</span><span class="token string">&quot;true&quot;</span> layout_centerVertical<span class="token operator">=</span><span class="token string">&quot;true&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button text<span class="token operator">=</span><span class="token string">&quot;右居中&quot;</span> layout_alignParentRight<span class="token operator">=</span><span class="token string">&quot;true&quot;</span> layout_centerVertical<span class="token operator">=</span><span class="token string">&quot;true&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>relative<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                    <h3 id="以兄弟控件作为参照物" tabindex="-1"><a class="header-anchor" href="#以兄弟控件作为参照物"
                            aria-hidden="true">#</a> 以兄弟控件作为参照物</h3>
                    <p>在相对布局中，以兄弟控件（已经确定好位置的控件）作为参照物来确定其他控件的位置。</p>
                    <p>————— ————— ————— ————— ————— —————</p>
                    <p>| 控件2：左上角 | | 控件5：正上方 | | 控件7：右上角 |</p>
                    <p>| 控件3：正左方 | | 控件1：基准兄弟控件| | 控件8：正右方 |</p>
                    <p>| 控件4：左下角 | | 控件6：正下方 | | 控件9：右下角 |</p>
                    <p>————— ————— ————— ————— ————— —————</p>
                    <p>在以兄弟控件（button1）作为参照物中，属性如下：</p>
                    <ul>
                        <li>
                            <p><code>layout_toRightOf<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span></code>
                                以兄弟控件（button1）作为参照物，使控件在兄弟控件button1的下方。</p>
                        </li>
                        <li>
                            <p><code>layout_toRightOf<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span></code>
                                以兄弟控件（button1）作为参照物，使控件在兄弟控件button1的右方。</p>
                        </li>
                        <li>
                            <p><code>layout_above<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span></code>
                                以兄弟控件（button1）作为参照物，使控件在兄弟控件button1的上方。</p>
                        </li>
                        <li>
                            <p><code>layout_below<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span></code>
                                以兄弟控件（button1）作为参照物，使控件在兄弟控件button1的下方。</p>
                        </li>
                        <li>
                            <p><code>layout_alignLeft<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span></code>
                                以兄弟控件（button1）作为参照物，使控件与兄弟控件button1的左方平齐。</p>
                        </li>
                        <li>
                            <p><code>layout_alignRight<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span></code>
                                以兄弟控件（button1）作为参照物，使控件与兄弟控件button1的右方平齐。</p>
                        </li>
                        <li>
                            <p><code>layout_alignTop<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span></code>
                                以兄弟控件（button1）作为参照物，使控件与兄弟控件button1的上方平齐。</p>
                        </li>
                        <li>
                            <p><code>layout_alignBottom<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span></code>
                                以兄弟控件（button1）作为参照物，使控件与兄弟控件button1的下方平齐。</p>
                        </li>
                    </ul>
                    <p>可以通过这8个属性的组合让控件处于兄弟控件的左上角、右上角、左下角、右下角、正上方、正下方、正左方、正右方等位置。例如给一个控件添加<code>layout_toRightOf<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span></code>和<code>layout_above<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span></code>属性后，该空间将以兄弟控件为参照物，使控件位于兄弟控件的右上角（两个控件的右侧边缘在同一垂线）。
                    </p>
                    <p>相对布局里以兄弟控件为参照物确定控件的位置的示例如下：</p>
                    <div class="language-javascript ext-js line-numbers-mode">
                        <pre class="language-javascript"><code><span class="token string">&quot;ui&quot;</span><span class="token punctuation">;</span>

$ui<span class="token punctuation">.</span><span class="token function">layout</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>relative<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button id<span class="token operator">=</span><span class="token string">&quot;button1&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;控件1:兄弟控件&quot;</span> layout_centerInParent<span class="token operator">=</span><span class="token string">&quot;true&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button text<span class="token operator">=</span><span class="token string">&quot;左上角&quot;</span> layout_above<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span> layout_toLeftOf<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button text<span class="token operator">=</span><span class="token string">&quot;右上角&quot;</span> layout_above<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span> layout_toRightOf<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button text<span class="token operator">=</span><span class="token string">&quot;左下角&quot;</span> layout_below<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span> layout_toLeftOf<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button text<span class="token operator">=</span><span class="token string">&quot;正上方&quot;</span> layout_above<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span> layout_alignLeft<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button text<span class="token operator">=</span><span class="token string">&quot;正下方&quot;</span> layout_below<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span> layout_alignLeft<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button text<span class="token operator">=</span><span class="token string">&quot;右下角&quot;</span> layout_toRightOf<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span> layout_below<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button text<span class="token operator">=</span><span class="token string">&quot;正左方&quot;</span> layout_alignTop<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span> layout_toLeftOf<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button text<span class="token operator">=</span><span class="token string">&quot;正右方&quot;</span> layout_toRightOf<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span> layout_alignTop<span class="token operator">=</span><span class="token string">&quot;@+id/button1&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>relative<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre>
                        <div class="line-numbers" aria-hidden="true">
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                            <div class="line-number"></div>
                        </div>
                    </div>
                </div><!---->
                <footer class="page-meta"><!---->
                    <div class="meta-item update-time"><span class="label">上次编辑于: </span><!----></div>
                    <div class="meta-item contributors"><span class="label">贡献者: </span><!--[--><!--[--><span
                            class="contributor" title="email: 946994919@qq.com">hyb1996</span><!--]--><!--]--></div>
                </footer>
                <nav class="page-nav"><a href="ui.html" class="nav-link active prev" aria-label="ui入门介绍">
                        <div class="hint"><span class="arrow left"></span>上一页</div>
                        <div class="link"><!---->ui入门介绍</div>
                    </a><a href="advanced.html" class="nav-link next" aria-label="其他布局与控件">
                        <div class="hint">下一页<span class="arrow right"></span></div>
                        <div class="link">其他布局与控件<!----></div>
                    </a></nav><!----><!----><!--]-->
            </main><!--]--><!----><!--]-->
        </div><!--]--><!----><!----><!--]-->
    </div>
    <script type="module" src="../../../assets/app.6aa2b576.js" defer></script>
</body>

</html>